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？（对于font-size，移动样式没有声明）。

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

谢谢！

Answer 1

问题1：

只会下载blue.png，它会忽略红色的（你覆盖它）

问题2：是的font-size在移动设备上是100px

问题3：不会被应用！

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

您可以在没有媒体查询的情况下首先应用移动设备，然后使用min-width

构建带有媒体查询的dekstop网站

Answer 2

Q1 ：这取决于。如果您的网页包含该类的元素，则会下载blue.png背景。

Q2 ：是的，完全如上

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

Answer 3

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

问题2：
是的，font-size在所有设备上都是相同的所有设备上的像素大小相同。 em是一个更适合移动设备的尺寸单元。

问题3：
未定义的属性媒体查询将从查询外部的类继承（如果可能）。
简单地说：否。

媒体查询逻辑（优先级）

3 个答案: