css - 对不同的元素或不同的宽度进行多个媒体查询更好吗？

Question

我正在创建一个响应式网站，目前正在进行一些媒体查询。我边写边写，例如:

.status-reply-disabled {
color: #B1B1B1;
font-size: 14px;
margin-top: 10px;
position: absolute;
margin-left: 65px;  
}

@media screen and (max-width: 600px) {
    .status-reply-disabled {
        font-size: 10px;
        margin-left: 35px;  
    }
}

然后稍后我会有这样的东西:

.status-reply-avatar {
border: 1px solid #d8d8d8;  
width: 45px;
border-radius: 50%;
position: absolute;
}

@media screen and (max-width: 600px) {
    .status-reply-avatar {
        display:none;   
    }
}

对于处理时间而言，将所有媒体查询(例如 600 像素)放在一个大查询中会更好吗？像这样:

@media screen and (max-width: 600px) {
    .status-reply-avatar {
        display:none;   
    }
    .status-reply-disabled {
        font-size: 10px;
        margin-left: 35px;  
    }

    ...

    All other styles for this width

    ...

}

还是我做得很好？

Answer 1

如果您没有大量的代码，那么性能并不重要。最近我更喜欢写媒体几个媒体查询，总是接近特定元素的一般规则，只是为了保持对事物的控制(比如在你的前两个代码块中)。我其实更喜欢那个。就速度而言，如果不会有太大区别。