考虑以下CSS(继续CSS媒体查询重叠规则):
/* Standard - for all screens below 20em */
body { color: black; font-size: 1em; }
/* Query A - slightly wider, mobile viewport */
@media (min-width: 20em) and (max-width: 45em) {
body { color: red; } /* supposed to be unique for this width */
}
/* Query B - everything else */
@media (min-width: 45em) {
body { font-size: larger; } /* because viewport is bigger */
}
当屏幕宽度恰好为45em时,根据标准CSS级联规则,45em处的重叠部分将被处理:
- 首先应用所有
max-width: 45em
定义, - 然后应用所有
min-width: 45em
定义。
- 所有文本通常为
黑色
,但查询A是唯一的,具有color: red
。 - 由于查询B适用于较大的视口,因此其文本具有CSS
font-size: larger
。
我看到两种可能性:
在查询B中重新声明文本为
color: black
,但如果将来选择更改color
,则需要管理两个声明。(当然,这一行代码没有这样的问题,但是想象一下有很多其他声明和选择器。)通过使用像
max-width: 799px
和min-width: 800px
这样的像素值来避免重叠,但那么你就使用了像素——我猜它们分别可以是49.9375em和50em。虽然如果默认值不再是16em并且某些值被四舍五入会怎样呢?而且我们仍然不确定在那个间隙发生了什么。(一个打破时空连续性的黑洞?)
两者都有缺点...还有其他想法吗?
max-width
上将值设置为49.99999em
,这样你就不必处理“间隙”(就像你可能会遇到49.9375em
一样)。 - ScottS50em
时仍然会应用两者。 - Baumr