Question

我有以下CSS样式：

@media (min-width: 1280px)
{
    .window-padding {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (min-width: 769px)

{
    .window-padding {
        padding-right: 20px;
        padding-left: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

.window-padding {
    padding-right: 10px;
    padding-left: 10px;
    padding-left: 0px;
    padding-right: 0px;
}

但是，当我在浏览器中打开（宽度> 1280px）时，仅应用最小宽度：1280px的填充顶部和填充底部。 padding-left和padding-right来自没有@media条件的样式。以下是它适用的内容：

修改：我重新排序CSS以使最小的尺寸首先解决问题。另外，我错误地重复了填充样式。

Answer 1

始终在@media css文件后调用main个样式，这可能会帮助您覆盖样式。

.window-padding {
    padding-right: 10px;
    padding-left: 10px;
    padding-left: 0px;
    padding-right: 0px;
}
@media (min-width: 1280px)
{
    .window-padding {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (min-width: 769px) and (max-width: 1279px)
{
    .window-padding {
        padding-right: 20px;
        padding-left: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

Answer 2

重新订购你的css＆amp;添加Max-width

 .window-padding {
        padding-right: 50px;
        padding-left: 50px;
    }


    @media (min-width: 1280px) {
        .window-padding {
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 30px;
            padding-right: 30px;
        }
    }
    @media (min-width: 769px) and (max-width: 1279px)  {
        .window-padding {
            padding-right: 20px;
            padding-left: 20px;
        }
    }

Answer 3

首先你去默认风格（之后增加屏幕rez）这意味着默认＆gt; 768> 1280（适用于最小宽度）如果你选择使用max-width（你去默认＆gt; 1280＆gt; 768）

表示最小宽度

.class {
  your style
}
@media screen (min-width: 768) {
  override default
}
@media screen (min-width: 1280) {
  override 768
} and so on

for max-width

.class {
  your style
}
@media screen (max-width: 1280) {
  override default
}
@media screen (min-width: 768) {
  override 1280
} and so on

Answer 4

有人可以告诉你为什么会这样吗？

更重要的CSS样式应该更低级别

CSS media min-width不应用所有样式

4 个答案: