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的CSS代码会碰撞并覆盖iPad的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开发人员必读的内容。

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

1 个答案: