5

我有多个@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 的最大宽度内。

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

4

1 回答 1

12

我不确定我是否完全遵循，但您的@media规则表明这是您想要的行为。如果屏幕为 1400 像素且宽度为#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%;
    }
}

对于 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%;
}

两者的结果相同。

于 2012-10-10T15:35:22.627 回答