为何需删除媒体查询中的max-width?仅删数值为何无效?
问题原因解析
核心问题出在CSS媒体查询的语法合法性上:
- 当你写
and (max-width:px)或者仅删掉数值变成and (max-width:)时,这两种写法都是无效的CSS语法——max-width属性必须搭配合法的长度值(比如2000px、100em这类),缺失有效数值的媒体查询条件会被浏览器判定为整个媒体查询块无效,直接忽略里面的所有样式。 - 这就导致你原本写在这个无效媒体查询里的
limegreen样式根本没被加载,浏览器自然会 fallback 到之前生效的aquamarine样式。 - 只有删掉整个
and (max-width:px)语句后,剩下的媒体查询条件(比如@media screen and (min-width:768px))变成合法的,里面的limegreen样式才会被正确解析并应用。
简单说:浏览器对CSS语法的容错性没那么高,缺失有效数值的媒体查询条件会直接废掉整个查询块,而不是忽略有问题的那部分条件。
内容的提问来源于stack exchange,提问作者Osamu Midoriya
相关产品推荐
相关产品推荐

