Question

我有意为桌面电脑和我的网站的移动版本制作不同大小的背景图像。例如：

media only screen and (max-width: 480px) {
   .myImage {
   background-image:url(image_small.jpg);
   }
}

.myImage {
background-image:url(image_big.jpg);
}

在浏览器中是否有任何类型的层次结构覆盖我的图片？移动浏览器会在其缓存或类似内容中加载image_big.jpg吗？我是否需要在html中以任何顺序实现我的css文件以实现我想要的？（停止浏览器下载我的image_big for mobile）

原谅我的英语

Answer 1

依次回答每个问题：

<强> 1。是否有任何类型的层次结构可以在浏览器中覆盖我的图片？

不确定您所指的内容，所应用的图片由CSS specificity / cascade /基本选择决定。显示的图像是唯一由适用规则标识的图像，最后列在一系列适用规则中的图像，或者是在具有最高特异性的适用规则中列出的图像

<强> 2。移动浏览器会在其缓存中加载image_big.jpg吗？

不，见下文

第3。我是否需要在html中以任何顺序实现我的css文件以实现我想要的？（停止浏览器下载我的image_big移动版）

不，虽然依赖于浏览器，但主流浏览器不会（似乎）加载不适用的图像（测试Chrome 32，FF10，IE9）。如果在加载的DOM中找不到CSS选择器，则认为图像不适用。

此外，这是与资产加载和媒体查询相关的great article

查询和背景图像的css层次结构

1 个答案: