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。

我错过了一些非常明显的东西吗？过去两天一直试图解决这个问题！谢谢，约翰

Answer 1

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

如果您希望仅在1024px和1400px之间应用，则需要将其更改为...

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

对于1024px以上的屏幕，#wrap的宽度将为72％，因为它们只匹配第一个媒体查询。如果屏幕低于1024px，#wrap的宽度将为100％，尽管它将与两个媒体查询匹配。将在1024px下为屏幕呈现的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%;
    }
}

对于所有屏幕尺寸高达1400px，#wrap的宽度将为72％，因为1024px以下的屏幕将同时看到这两个规则......

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

1024px以上的屏幕会看到......

#wrap {
width: 72%;
}

两者都有相同的结果。

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

1 个答案: