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

在媒体查询中，您将边距和边距设置为＆＃34; auto，＆＃34;和＆＃34; 0。＆＃34;我想你可能想要定义所有四个属性：

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

如果媒体查询不会覆盖它们，则会转移属性。

Answer 2

感谢您的帮助，但我自己也明白了。

我通过覆盖bootstrap中的行类来修复它（它将两者都设置为-15），这是真正的问题（修复）。

@media screen and (max-width: 966px) {
    .row {
        margin-left: 0;
        margin-right: 0;
    }
}

我无法回答我的问题，所以如果主持人想要这样做，请继续。它解决了。

css媒体查询奇怪的行为

2 个答案: