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

Question

好吧，这可能是一个非常简单/显而易见的问题，所以如果这是一个愚蠢的问题但我不知道还能问到哪里，我深表歉意。但是当使用 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 你可以使用这两种方法。如果您使用了第一种方法，您的代码将会很长。所以，我的建议是你应该选择第二种方法