@media查询-一个规则覆盖另一个规则

Question

我有多个@media查询，所有查询都运行良好，但一旦我输入的最大屏幕宽度高于1024px，则适用于更高宽度的规则。

@media screen and (max-width: 1400px)
{
#wrap {
width: 72%;
}
} 
@media screen and (max-width: 1024px) 
{
#slider h2 {
width: 100%;
}
#slider img {
margin: 60px 0.83333333333333% 0 2.08333333333333%;
}
.recent {
width: 45.82%;
margin: 10px 2.08333333333334% 0 1.875%;
}
}

正如您所看到的，1024px(以及800px最大宽度查询)不会更改#wrap宽度，并且工作正常。一旦我添加1400px的最大宽度查询，它就会将所有大小的查询更改为72%，并对任何元素执行相同的操作-例如，如果我将#slider img设置为具有40px的边距，它将以所有大小显示，即使它的最大宽度仅为1400px。

我是不是错过了一些显而易见的东西？在过去的两天里，我一直在努力解决这个问题！谢谢，John

Answer 1

我不确定我是否完全遵守，但您的@media规则表明这是您想要的行为。如果屏幕为1400px且更低，则#wrap的宽度将为72%，这包括其他媒体查询中提到的所有其他大小。

如果你想让它只适用于1024px到1400px之间，你需要将其更改为…

@media screen and (max-width: 1400px) and (min-width: 1024px)
{
#wrap {
width: 72%;
}
} 

EDIT您还必须记住CSS中的排序很重要。。。

@media screen and (max-width: 1400px)
{
#wrap {
width: 72%;
}
}
@media screen and (max-width: 1024px)
{
#wrap {
width: 100%;
}
}

对于1024px以上的屏幕，#wrap的宽度将为72%，因为它们只匹配第一个媒体查询。如果屏幕低于1024px，则#wrap的宽度将为100%，尽管它将被两个媒体查询匹配。将为1024px以下的屏幕呈现的CSS将看起来像。。。

#wrap {
width: 72%;
}
#wrap {
width: 100%;
}

稍后在样式表中定义的规则将覆盖以前的规则http://www.w3.org/TR/CSS21/cascade.html#cascading-订单6.4.1第4点。因此，如果您交换了规则的顺序。

@media screen and (max-width: 1024px)
{
#wrap {
width: 100%;
}
}
@media screen and (max-width: 1400px)
{
#wrap {
width: 72%;
}
}

对于1400px以下的所有屏幕尺寸，#wrap的宽度将为72%，因为1024px以下的屏幕将看到这两个规则，就好像它们是。。。

#wrap {
width: 100%;
}
#wrap {
width: 72%;
}

超过1024px的屏幕将显示。。。

#wrap {
width: 72%;
}

两者的结果相同。