@media 查询 - 一条规则覆盖另一条规则？

Question

我有多个@media 查询都可以正常工作，但只要我输入的最大屏幕宽度大于 1024 像素，更高宽度的规则就会应用于所有内容。

    @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%;
    }
}

如您所见，1024 像素（以及 800 像素最大宽度查询）不会更改 #wrap 宽度并且可以正常工作。一旦我添加了 1400px 最大宽度查询，它会将所有尺寸的它们更改为 72%，并对任何元素执行相同的操作 - 例如，如果我将 #slider img 设置为具有 40px 的边距，即使它会显示在所有尺寸它仅在 1400px 的最大宽度内。

我是否遗漏了一些非常明显的东西？在过去的两天里一直在努力解决这个问题！ 谢谢，约翰

Answer 1

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

如果您希望它仅适用于 1024 像素和 1400 像素之间，您需要将其更改为...

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

编辑您还必须记住 CSS 中的顺序很重要...

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

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

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

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

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

对于不超过 1400 像素的所有屏幕尺寸，#wrap 的宽度将为 72%，因为低于 1024 像素的屏幕将看到这两个规则，就好像它们...

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

超过 1024 像素的屏幕会看到...

#wrap {
width: 72%;
}

两者的结果相同。