媒体查询逻辑（优先级）

下面是一个简单的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文件中它会出现在移动类之前？

谢谢！

来源

2014-12-19 Malasorte

是---是---否 – DaniP

http：// timkadlec。com/2012/04/media-query-asset-download-results /这是一个很好的参考资料，可以帮助您了解哪些浏览器在某些媒体查询中下载资源 – cport1

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

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

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

来源

2014-12-19 14:16:58 Claudio

谢谢你的好链接。 – Malasorte

问题1：

只有blue.png将被下载，它忽略了红色（你覆盖它）

问题2：是字体大小为100px的移动

问题3：不，它会被应用！

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

你就能更好地把移动第一没有媒体查询，然后建立了dekstop网站使用最小宽度

来源

2014-12-19 14:05:24 Extranion

您的问题1不正确 – cport1

我调整了它，只下载了蓝色。 – Extranion

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

Q2：是的，正是如上

Q3：没有，因为第二条规则不受任何限制mediaquery所以，无论你正在使用的设备，将始终应用。

来源

2014-12-19 14:15:22 fcalderan

媒体查询逻辑（优先级）

回答

相关问题