css – @media查询 – 一个规则会覆盖另一个规则吗？

我有多个@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.

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

最佳答案

我不确定我是否完全遵循,但你的@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,因为1024px以下的屏幕将看到两个规则,就好像它们一样……

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

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

#wrap {
width: 72%;
}

两者都有相同的结果.

css – @media查询 – 一个规则会覆盖另一个规则吗？

猜你在找的CSS相关文章