媒体查询逻辑(优先级)

Question

下面是一个简单的CSS：

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.test {
background-image: url('red.png');
}
}

/* Desktop ----------- */
.test {
background-image: url('blue.png');
font-size: 100px;
}

问题1：如果我使用智能手机访问这个网站，浏览器也会下载文件"blue.png“吗？(即使屏幕上没有显示)

问题2：如果我使用智能手机访问这个网站，字体大小会是100 be吗？(对于字体大小，移动样式没有任何声明)。

问题3：如果我使用智能手机访问这个网站，浏览器会完全忽略第二个.test类(用于桌面吗？)如果是，如果在CSS文件中它会出现在移动类前面，浏览器会忽略它吗？

谢谢!

Answer 1

问题1：

正如注释中提到的@cport1 1一样，您几乎可以看到结果这里。

用另一个图像覆盖background-image将在大多数浏览器上工作。

但是，您应该创建另一个具有默认背景(大于移动)的媒体查询。

关于问题2：

是的，所有设备的font-size都是相同的。

像素在所有设备上都是相同的大小。em是一个更便于移动的尺寸单位。

问题3：

未定义的媒体查询属性将从查询之外的类继承(如果可能)。

简单地说:没有。

Answer 2

问题1：

只有blue.png将被下载，它将忽略红色的(您覆盖它)

问题2:是的，手机的字体大小是100 on。

问题3:不，它将被应用！

示例：http://jsbin.com/fohuzakeki/1/edit?html,css,js,output

您可以更好地在不使用媒体查询的情况下应用移动设备，然后使用最小宽度构建带有媒体查询的dekstop站点。

Answer 3

Q1：视情况而定。如果您的页面包含带有该类的元素，则将下载blue.png后台。

Q2：是的，和上面一样

Q3：不，因为第二条规则不受任何媒体查询的限制，因此，无论您使用的是哪个设备，它都将始终被应用。