css媒体查询奇怪行为

我使用媒体查询构建一个响应式网站。css媒体查询奇怪行为

相关代码：

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

铬完美适用的代码（它不会被覆盖），但是元素仍然比容器大。我不知道为什么会这样，这真的很奇怪。

来源

2014-07-07 sheez

你可以在[jsfiddle]（http://www.jsfiddle.net）中做一个例子吗？ – misterManSam

感谢您的帮助，但我自己想通了。

我通过从bootstrap覆盖行类（它将两个设置为-15）来修复它，这是REAL问题（修复）。

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

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

来源

2014-07-08 11:23:29 sheez

“我不能回答我的问题”但你只是发布了一个答案... – BoltClock

新人必须等待8小时才能回答自己的问题。我不知道为什么，所以我今天而不是昨天回答了。 – sheez

那么，你现在可以删除那个声明，你已经发布了一个答案。（您也可以将其标记为接受 - 大约在另一天左右。） – BoltClock

在您的媒体查询中，您将边距和填充设置为“自动”和“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; 
} 
}

属性结转如果媒体查询不覆盖它们。

来源

2014-07-07 15:27:36 Graham

css媒体查询奇怪行为

回答

相关问题