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;
   }
}