我正在尝试使用媒体查询完成我的第一个项目,而且我面临一个奇怪的问题。
我开始使用此媒体查询开发移动设备:
@media screen and (max-width:479px) {}
然后,我开发了更大的移动设备:
@media screen and (min-width:480px) and (max-width:600px) {}
然后是小片:
@media screen and (min-width:601px) and (max-width:720px) {}
更大的平板电脑:
@media screen and (min-width:721px) and (max-width:980px)
然后是笔记本电脑:
@media screen and (min-width:981px) {}
到目前为止一切正常,但现在我正在为更大的笔记本电脑进行此媒体查询@media screen and (min-width:1200px) {}
,当我将浏览器调整到1200以上时,如果我在此媒体查询中没有任何内容,我的内容不是保持格式化,而是我的内容捕获了之前的媒体查询:@media screen and (min-width:981px) {}
。
这是正常的吗?如果一个媒体查询没有CSS格式,内容会捕获另一个媒体查询吗?
答案 0 :(得分:4)
如果媒体查询中没有任何内容,则浏览器不需要更改任何内容。
由于任何至少1200px(min-width:1200px
)的东西也必须至少为981px(min-width:981px
),如果没有任何改变,那么适用于后者的任何内容都将适用于前者。在某种程度上,你可以说浏览器“捕获”早期的媒体查询,但它实际上正在捕捉两者;在第二个中没有任何东西可以覆盖第一个,所以样式保持不变。
这是预期的行为。
您的移动设备和平板电脑媒体查询不适用于笔记本电脑(和桌面设备)的原因是您指定了max-width
,这与笔记本电脑媒体查询不同,后者只有min-width
条件。