对不同的元素或不同的宽度进行多个媒体查询是否更好?

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;   
}
}

对于处理时间，将所有媒体查询(例如 600px(放在一个大查询中会更好吗？喜欢这个：

@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

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

Answer 2

完全没有区别。在组织方面，您可以像以前一样编写代码并按部分组织代码，或者仅为媒体查询创建另一个 CSS 文件。

Answer 3

当然，将你的代码放在一个媒体查询中，它会做同样的事情，你会写更少的代码行，你会遵循DRY原则(不要重复自己(。

如果在一个文件中定义两次相同的媒体查询，则不是一个很好的做法...

Answer 4

尝试将所有代码放在特定查询下，例如最大宽度= 600px。这对于干净和语义的代码更好。从桌面转到较窄的屏幕，对于移动设备来说，大约 400 像素。它总是更好。如果你在一周左右后再回来，你会感到困惑。从宽开始，然后随心所欲地变窄。如果您仍然没有执行 900px 停止，请不要在 max-width=600px 中为元素编码。