媒体查询，哪种方法更好，为什么？

Question

我一直在写媒体查询，在我所有的正常 CSS 风格（台式机和笔记本电脑设备）之后。但是，最近，在查看一些示例和引导程序 CSS 文件时，我注意到在编写 css 之后直接执行媒体查询。这个例子将更好地说明我的问题，

.content {
    padding-top: 20px;
    padding-bottom: 40px; 
    font-size: 1rem;  
    }
.something{
   background: red;
   padding:20px;
   width:800px;
}
   // The Media Queries after I write all normal CSS
@media only screen and (max-width: 768px) {
    .content{
      padding:10p;
      //some style for mobile
    }
    .something{
       width:100%;
   //some style for mobile
    }
}

或

.content {
        padding-top: 20px;
        padding-bottom: 40px; 
        font-size: 1rem;  
        }
// Media Query Directly After the CSS
@media only screen and (max-width: 768px) {
        .content{
          padding:10p;
          //some style for mobile
        }
}
.something{
       background: red;
       padding:20px;
       width:800px;
    }
       // Media Query Directly After the CSS
@media only screen and (max-width: 768px) {        
    .something{
           width:100%;
       //some style for mobile
        }
    }

所以，我很好奇，哪种方法是正确的还是更好的？

我一直在做第一种方式，因为我不必每次都重复媒体查询“@media only screen and (max-width: ..px)”。

谢谢

Answer 1

这真的取决于你。没有 "right" 方法可以做到这一点。这取决于您希望如何组织样式表。如果您有许多针对不同视口的媒体查询规则，那么按照您一直在做的方式进行可能更有意义，因为您是对的——为不同的媒体查询设置部分会更有效。您看过的示例可能会以不同的方式进行处理，以使阅读它的其他人更容易理解。我认为唯一重要的是尝试选择一种方式并尽可能地坚持下去。（与此同时，规则偶尔也会被打破。）在较长的运行中，这将帮助您的代码更具可预测性，并且您将更容易理解和维护它。

Answer 2

第二个选项是更好的方法 it.As 如果一段时间后 CSS 发生任何变化，那么您需要找到正常 CSS 的 class以及媒体查询。

在这种情况下，您只需搜索一次即可。

Answer 3

对于给出的示例，主要归结为个人喜好，这两个示例各有利弊。

第一个例子，有一个 @media 规则遵循 DRY 原则，这被认为是最佳实践。这样做的缺点是，可能不会立即清楚某些不同的样式可能适用于这些元素。

第二个例子，在初始声明之后有 @media 条规则似乎使声明更容易遵循，因为人们可以立即看到不同的 @media 的情况会有所不同。虽然它不是干的。

我更喜欢第一种方法，尽可能晚地将 @media 规则添加到样式表并在其中进行多次覆盖。

我这样做的原因很简单：

它是干爽的设计
如果您觉得需要对 <link> 元素进行媒体查询，您可以更轻松地将它们提取到单独的文件中
它永远不会只因一个 @media 规则而停止，还会有更多，当这种情况发生时，所有支持第二种方法（立即覆盖）的 readability/clarity 论点都会随着您的努力而失去价值'会变得混乱。

Answer 4

显然，人们更愿意将 CSS 规则的媒体查询版本与非媒体查询版本组合在一起，这样它们就可以一起管理。例如，如果我为每个组件编写单独的 CSS，我通常希望该组件的规则的媒体查询版本和非媒体查询版本都在该组件的文件中。当我添加和修改规则时，我宁愿在一个地方做，而不是两个或更多。

如果您不得不一次又一次地编写媒体查询而感到困扰，从更改断点时维护代码的角度来看，这是一个有效的问题，请考虑使用预处理器，例如 postCSS 允许您为媒体查询定义别名。例如，this plugin 将允许您编写

@custom-media --small-viewport (max-width: 30em);

@media (--small-viewport) {
  /* styles for small viewport */
}

媒体查询，哪种方法更好，为什么？

Media Queries, which one is the better way and why?

html

css

media-queries

responsive