时间戳

首页 > 解决方案 > 为不同的移动断点处理和分组 CSS 属性

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

问题描述

好的，所以这可能是一个非常简单/显而易见的问题，所以如果这是一个愚蠢的问题，但我不知道还能问哪里，我深表歉意。但是当使用 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;
        }

    }

标签： cssformatmedia-queries

解决方案

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

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

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

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

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

推荐阅读