Question

在我所有正常的CSS样式（台式机和笔记本电脑设备）之后，我一直在编写媒体查询。但是，最近，在查看一些示例和bootstraps 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
        }
    }

所以，我很好奇，这是正确的方式还是更好的方式？

我一直在做第一种方式，因为我不必重复媒体查询＆＃34; @media only screen和（max-width：.. px）＆＃34;每次。

谢谢

Answer 1

这真的取决于你。没有“正确”的方法来做到这一点。这取决于您希望如何组织样式表。如果您有不同视口的许多媒体查询规则，那么按照您的方式进行操作可能更有意义，因为您是对的 - 为不同的媒体查询创建部分更有效。您所看到的示例可能采用不同的方式，以便让其他人阅读它更容易理解。我认为唯一重要的是尝试选择一种方式，并尽可能地坚持下去。（与此同时，规则偶尔会被打破。）从长远来看，这将有助于您的代码更易于预测，并且您将更容易理解和维护它。

Answer 2

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

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

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

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

Answer 3

第二个选项是更好的方法。如果在一段时间后CSS发生任何变化，那么你需要找到普通CSS和媒体查询的类。

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

Answer 4

对于给出的例子，它主要归结为个人偏好，两个例子都有利弊。

第一个示例，只有一个@media规则符合DRY原则，这被认为是最佳做法。这样做的缺点是，可能不会立即明确某些不同的样式可能适用于这些元素。

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

我更喜欢第一种方法，尽可能晚地将<link>规则添加到样式表中并在其中包含多个覆盖。

我这样做的原因很简单：

设计干燥
如果您觉得需要在@media上进行媒体查询 - 您可以更轻松地将这些内容提取到单独的文件中
它永远不会停止只有一个{{1}}规则，会有更多，当发生这种情况时，所有可读性/清晰度参数支持第二种方法（立即覆盖）会失去它们的价值，因为你会变得混乱。

媒体查询，哪一个更好的方式，为什么？

4 个答案: