在所有CSS之后，每个分辨率使用一个媒体屏幕更好还是在CSS的每个部分之后使用单独的媒体屏幕更好？

我的问题是，在所有CSS代码之后，每个分辨率有一个媒体屏幕更好，还是有一小部分CSS代码然后是相关的媒体屏幕更好？即：

.example 1{ background: #fff; font-size:7rem}
@media screen and (min-width:1921px) {
    .example 1{ background: #ccc; font-size:9rem}
}
     .example 2{ width: 100%; height 50%}
@media screen and (min-width:1921px) {
    example 2{ width: 50%; height 25%}
}

----或-----

---

很明显，在一个现实世界的例子中，我们使用的距离超过几行，但问题是相同的-最好在所有代码之后有一个大媒体屏幕部分，或者在每个部分之后都有媒体屏幕，例如导航部分、正文部分、英雄部分等？

我通常使用这两种方法，根据需要

如果在移动版中，有问题的部分发生了很大变化，我将使用第二种解决方案，全部在单个媒体屏幕规则中，位于样式的底部

---

另一方面，如果这些调整很小或非常小，并且我的风格底部没有媒体屏幕规则，我会采用第一种方法，即紧跟桌面规则之后的媒体屏幕规则。

谢谢。因此，除了偏好之外，任何一种方式都没有真正的危险或好处？不，这更多的是一个秩序问题。几个月后，当您阅读代码时，可能会出现问题。如果你有几个小的媒体查询，而不是一个单一的媒体查询，那么第一个解决方案肯定会更加混乱。这是一个基于观点的问题（因此偏离主题）。但是，第二种方法更适合媒体查询和CSS的读取/解释方式，更不用说对其他开发人员的可读性了。

    .example 1{ background: #fff; font-size:7rem}
    .example 2{ width: 50%; height 25%}
  @media screen and (min-width:1921px) {
        .example 1{ background: #ccc; font-size:9rem}
        .example 2{ width: 50%; height 25%}
    }