如果屏幕宽于 900 像素，则添加填充答案

【问题标题】：Add padding if screen is wider than 900px如果屏幕宽于 900 像素，则添加填充
【发布时间】：2014-01-12 23:46:51
【问题描述】：

我正在尝试让我的网站在不同的屏幕上以不同的方式显示。

我在我的 CSS 中使用媒体查询来更改某些元素。但是，我似乎做错了什么，因为浏览器的行为与我想要的完全相反。

只有在屏幕足够宽以适应它的情况下，我才想为我的内容元素（具有 content 类的单个 div）添加填充。就我而言，我希望仅当屏幕宽度超过 1000 像素时才添加填充。

这就是我现在拥有的：

.content {
    margin: auto;
    width: 990px;
    overflow: hidden;
    padding:0 5px 0 5px;
}
@media (max-width:1000px) {
    .content{
        padding:0;
    }
}

有人可以帮忙吗？我知道这可能很简单，但我之前没有经常使用这些媒体查询，所以我不知道所有的语法。

【问题讨论】：

标签： html css width media-queries padding

【解决方案1】：

解决方案有效。浏览器正在缓存旧的 CSS，因此没有显示更改。我清除了缓存（Ctrl+F5），它起作用了。

【讨论】：

【解决方案2】：

我猜你必须使用'@media only screen and()'。试试：

@media only screen 
and (min-width : 1000px) {
    .content{
    padding:0;
}
}

【讨论】：

【解决方案3】：

您提供的代码似乎可以正常工作，至少对我来说是这样。但问题可能是 5px 太小而无法注意到。

尝试将其增加到 20px 或 50px 以查看其是否有效。

【讨论】：