我们如何准确地分隔媒体查询以避免重叠?
例如,如果我们考虑代码:
@media (max-width: 20em) {
/* for narrow viewport */
}
@media (min-width: 20em) and (max-width: 45em) {
/* slightly wider viewport */
}
@media (min-width: 45em) {
/* everything else */
}
在所有支持的浏览器中,在20em和45em时会发生什么?
我见过人们用途:比如799px和800px,但是屏幕宽度是799.5px呢?(显然不是在普通显示器上,而是在视网膜上?)
考虑到规格,我对这里的答案非常好奇。
5条答案
按热度按时间pcww981p1#
CSS媒体查询重叠的规则是什么?
喀斯喀特
@media
规则对级联是透明的,因此当两个或多个@media
规则同时匹配时,浏览器应在所有匹配的规则中应用样式,并相应地解析级联。在所有支持的浏览器中,在20 em和45 em时会发生什么?
在精确的20 em宽,你的第一个和第二个媒体查询都将匹配。浏览器将应用
@media
规则中的样式并相应地级联,因此如果有任何冲突的规则需要重写,最后声明的规则将获胜(考虑特定的选择器,!important
等)。同样,对于第二个和第三个媒体查询,当视口正好是45 em宽时。考虑你的示例代码,添加了一些实际的样式规则:
当浏览器视口正好是20 em宽时,这两个媒体查询都将返回true。通过级联,
display: block
覆盖display: none
,float: left
将应用于任何具有.sidebar
类的元素。您可以将其视为应用规则,就好像媒体查询不存在开始:
当浏览器匹配两个或多个媒体查询时,级联如何发生的另一个例子可以在另一个答案中找到。
但是要注意的是,如果您的声明在两个
@media
规则中 * 不 * 重叠,那么所有这些规则都将适用。这里发生的是两个@media
规则中声明的联合,而不仅仅是后者完全推翻了前者。这就引出了你之前的问题:我们如何准确地分隔媒体查询以避免重叠?
如果您希望避免重叠,您只需要编写互斥的媒体查询。
请记住,
min-
和max-
前缀表示“最小值”和“最大值”;这意味着(min-width: 20em)
和(max-width: 20em)
都将匹配恰好20 em宽的视口。看起来你已经有了一个例子,这就引出了你的最后一个问题:
我见过人们用途:比如799 px和800 px,但是屏幕宽度是799.5px呢?(显然不是在普通显示器上,而是在视网膜上?)
这一点我不是很确定CSS中的所有像素值都是逻辑像素,我一直很难找到一个浏览器,可以报告视口宽度的分数像素值。我试过用一些iframe做实验,但没有任何结果。
从我的实验来看,iOS上的Safari似乎会对所有小数像素值进行舍入,以确保
max-width: 799px
和min-width: 800px
中的任何一个匹配,即使视口实际上是799.5px(显然与前者匹配)。1尽管在Conditional Rules模块或Cascade模块(后者目前正在重写)中没有明确说明这些,但级联是正常发生的,因为规范只是说要在任何和所有
@media
规则中应用匹配浏览器或媒体的样式。vwoqyblh2#
我在这里推荐了一下:
但发现这不是一个好主意,因为它现在不能在Chrome上工作,无论是在我的Ubuntu桌面上还是在我的Android手机上。(如这里所解释的:calc() not working within media queries)但是,我发现了一个更好的方法.
然后砰!
5w9g7ksd3#
calc()
可以用来解决这个问题(min-width: 50em and max-width: calc(50em - 1px)
将被正确堆叠),但浏览器支持差,我不会推荐它.信息:
其他人提到,不使用
em
单元将有助于您的查询堆叠。nle07wnf4#
为了它的价值,我刚刚在MS Edge(v118.0.2088.46)中发现,当在DevTools中使用设备仿真时,选择响应维度,然后选择599px的宽度,以下媒体查询不适用:
如果我将显示宽度减小到598px,或者将媒体查询的最大宽度增加到599.5px,就可以得到想要的结果。似乎是某种内部舍入问题。
在Chrome 118.0.5993.89和Firefox 118.0.2中也发现了相同的行为。
dojqjjoe5#
如果只有两个状态,可以使用
not
运算符:注意:要使用
not
,需要在查询中有all
。注意:
not
会对整个查询求反,不考虑父项,参见:反转查询的含义