处理和分组 CSS 不同移动断点的属性

Question

好的，所以这可能是一个非常 simple/obvious 的问题，如果这是一个愚蠢的问题但我不知道还能问到哪里，我深表歉意。但是当使用 CSS 和媒体查询作为响应式布局时，我应该在媒体查询中重复使用 CSS 代码吗？例如：

h1 {
font-size:14px;
margin:0;
padding:0;
}

@media (min-width:768px) {

h1 {
font-size:12px;
margin:0;
padding:0;
}

}

或者这是正确的方法吗？

h1 {
font-size:14px;
margin:0;
padding:0;
}

@media (min-width:768px) {

h1 {
font-size:12px;
}

}

以及关于断点的分组 css 属性。我应该为每个断点将所有 CSS 属性分组吗？还是只根据需要做？例如：

第一种方法

        h1 {
        font-size:14px;
        margin:0;
        padding:0;
        }

        h2 {
        font-size:12px;
        margin:0;
        padding:0;
        }

        @media (min-width:768px) {

        h1 {
        font-size:12px;
        margin:0;
        padding:0;
        }

        h1 {
        font-size:10px;
        margin:0;
        padding:0;
        }

        }

//Other CSS properties for this page/site

    #page-footer .footer-bot {
        background-color:#24262b;
        font-family:'PT Sans',sans-serif;
        font-weight:400;
        text-transform:uppercase;
        font-size:10px;
        color:#adadad;
        letter-spacing:.3px;
        line-height:18px;
        padding-top:5px;
        padding-bottom:5px;
    }

    @media (min-width:768px) {

        #page-footer .footer-bot {
            line-height:25px;
            padding-top:0;
            padding-bottom:0;
        }

    }

或者在第二种方法中，等到 CSS 脚本结束，并在最后为一组我想使用的每个断点更改所有断点？

        h1 {
        font-size:14px;
        margin:0;
        padding:0;
        }

        h2 {
        font-size:12px;
        margin:0;
        padding:0;
        }

    #page-footer .footer-bot {
        background-color:#24262b;
        font-family:'PT Sans',sans-serif;
        font-weight:400;
        text-transform:uppercase;
        font-size:10px;
        color:#adadad;
        letter-spacing:.3px;
        line-height:18px;
        padding-top:5px;
        padding-bottom:5px;
    }

//Other CSS properties for this page/site

    @media (min-width:768px) {

        h1 {
        font-size:12px;
        margin:0;
        padding:0;
        }

        h1 {
        font-size:10px;
        margin:0;
        padding:0;
        }

        #page-footer .footer-bot {
            line-height:25px;
            padding-top:0;
            padding-bottom:0;
        }

    }

Answer 1

这是使用媒体查询断点的正确方法。

h1 {
font-size:14px;
margin:0;
padding:0;
}

@media (min-width:768px) { 
 h1 {
  font-size:12px;
 } 
}

只添加要在断点中更改的代码。无需在媒体查询中重复相同的代码。

关于分组CSS这两种方法都可以使用。如果您使用了第一种方法，您的代码将会很长。所以，我的建议是你应该使用 第二种方法

处理和分组 CSS 不同移动断点的属性

Handling and grouping CSS properties for different mobile breakpoints

css

format

media-queries