@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.

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

Answer 1

我不确定我是否完全遵循,但你的@media规则表明这是你想要的行为.如果屏幕为1400px且较低,则宽度为#wrap72%,这包括其他媒体查询中提到的所有其他尺寸.

如果您希望它仅适用于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%;
    }
}

#wrap所有屏幕尺寸高达1400px 的宽度将为72%,因为1024px以下的屏幕将看到两个规则,就好像它们一样......

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

超过1024px的屏幕将会看到......

#wrap {
width: 72%;
}

两者都有相同的结果.