css 媒体查询奇怪的行为

Question

我正在使用媒体查询构建响应式网站。

相关代码:

.container {
    width: 70%;
    margin: 0px auto;
    padding: 2%;
    background:#fff;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    padding-top: 2.5em;
}

当我缩小我的浏览器时，由于填充，页面上的元素变得比容器元素大。当我使用 chrome 的开发人员工具手动将填充设置为 0 时，元素再次完美地适合容器(正如我想要的那样)。

所以我想，我为它做一个媒体查询，并在元素变得比容器大时将填充重置为 0。

像这样:

@media screen and (max-width: 966px) {
    .container {
    width: 70%;
    margin: auto;
    padding: 0;
    background:#fff;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    padding-top: 2.5em;
    }
}

Chrome 完美地应用了代码(它没有被覆盖)，但是元素仍然比容器大。我不知道为什么会这样，这真的很奇怪。

Answer 1

在您的媒体查询中，您将边距和填充设置为“自动”和“0”。我认为您可能想要定义所有四个属性:

@media screen and (max-width: 966px) {
.container {
width: 70%;
margin: 0 auto 0 auto;
padding: 0 0 0 0;
background: #fff;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
padding-top: 2.5em;
}
}

如果媒体查询不覆盖它们，属性将被继承。