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进行分组，您可以同时使用这两种方法。如果您使用了第一种方法，那么您的代码将会很长。因此，我的建议是您应该使用第二种方法

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

1 个答案: