html - CSS 媒体最小宽度不应用所有样式

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)，仅应用了 min-width:1280px 的 padding-top 和 padding-bottom。 padding-left 和 padding-right 来自没有 @media 条件的样式。 这是它的应用:

编辑: 我将 CSS 重新排序为最小尺寸，首先解决了这个问题。 另外，我有错误的重复填充样式。

Answer 1

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

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