CSS响应图像 - 不要在移动设备中加载/删除大尺寸图像

Question

我正在处理具有许多大图像的响应式网站...

我知道如何调整/隐藏移动设备的图像。在这种情况下，图像正在加载和隐藏，这会导致来自用户设备的更多互联网数据。

相反，如果有人在手机上查看，我不想加载大图像

请帮助吗？

Answer 1

你可以像这样用css导入你的图像：

@media screen and (min-width:800px){
    .class{
    background-image:url('large.png');
    }
}

并重新定义您的移动课程

@media screen and (max-width:500px) {
   .class{
      background-image:none;
   }
}