如果屏幕宽度超过900px，请添加填充

Question

我试图让我的网站在不同的屏幕上显示不同。

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

我想在我的内容元素（带有类content的单个div）中添加填充，只有当屏幕足够宽以适合它时。就我而言，我希望仅在屏幕宽度大于1000px时添加填充。

这就是我现在所拥有的：

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

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

Answer 1

您提供的代码似乎正在运行，至少对我而言。但问题可能是5px很小，需要注意。

尝试将其增加到20px或50px以查看其是否正常工作。

Answer 2

我猜你必须使用'@media only screen and（）'。尝试：

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

Answer 3

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