如果一个媒体查询没有CSS格式,html内容会捕获另一个媒体查询?

时间:2014-05-15 01:56:22

标签: css css3 responsive-design media-queries

我正在尝试使用媒体查询完成我的第一个项目,而且我面临一个奇怪的问题。

我开始使用此媒体查询开发移动设备:

@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格式,内容会捕获另一个媒体查询吗?

1 个答案:

答案 0 :(得分:4)

如果媒体查询中没有任何内容,则浏览器不需要更改任何内容。

由于任何至少1200px(min-width:1200px)的东西也必须至少为981px(min-width:981px),如果没有任何改变,那么适用于后者的任何内容都将适用于前者。在某种程度上,你可以说浏览器“捕获”早期的媒体查询,但它实际上正在捕捉两者;在第二个中没有任何东西可以覆盖第一个,所以样式保持不变。

这是预期的行为。

您的移动设备和平板电脑媒体查询适用于笔记本电脑(和桌面设备)的原因是您指定了max-width,这与笔记本电脑媒体查询不同,后者只有min-width条件。