css - 媒体查询逻辑(优先级)

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:如果我用智能手机访问这个网站，字体大小会是100px吗？ (对于字体大小，移动样式没有任何声明)。

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

谢谢!

Answer 1

问题一:
正如评论中提到的@cport1，你几乎可以看到结果 here .
用另一个图像覆盖 background-image 将适用于大多数浏览器。
但是，您应该使用默认背景(大于移动设备)创建另一个媒体查询。

对于问题2:
是的，font-size 在所有设备上都是一样的。
所有设备上的像素大小都相同。 em 是一种对移动设备更友好的尺寸单位。

问题三:
属性未定义媒体查询将从查询外部的类继承(如果可能)。
简单地说:不。