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