为什么我的iPad媒体查询与我的桌面媒体查询冲突？

Question

这就是我如何编码我的桌面CSS这样。

@media (max-width: 1367px) 

这是我的iPad CSS

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) 
and (min-resolution: 132dpi) 

不幸的是，我曾经编写桌面CSS冲突，覆盖了iPad的CSS的CSS代码。这是为什么？每个目标都有不同的设备，但是为什么尽管iPad的媒体查询更具体，它们之间会发生冲突。

Answer 1

这两个媒体查询并不相互排斥，因此两个均按顺序进行处理 - 媒体查询没有特殊性，只是适用性。然后它在CSS级别成为一个特殊问题：CSS中更具体的规则优先，而在特殊情况下使用最后一个定义。

实施例：

@media (max-width:1300px) { 
    p { color:green; } 
} 
@media (min-width:1000px) { 
    p { color:red; } 
} 

对于1000点1300的像素两者的规则集应用之间的浏览器，并且由于这两种载规则同样特定后者“胜” - 段落将为红色。

有关CSS如何级联的更多信息can be found here in the specs，特别是第6.4.3节是每个Web开发人员必读的内容。