Sass 媒体查询scss断点最佳实践

关于媒体查询的使用，我和我的团队领导有点争吵。 使用媒体查询有两种方法（据我所知）

方法1：

@media only screen and (max-width: 600px) {
  .container {
    width: 100%;
  }
}

@media only screen and (min-width: 600px) {
  .container {
    width: 90%;
  }
}

@media only screen and (min-width: 768px) {
  .container {
    width: 80%;
  }
}

方法2：

.container {
  @media only screen and (max-width: 600px) {
    width: 100%;
  }

  @media only screen and (min-width: 600px) {
    width: 90%;
  }

  @media only screen and (min-width: 768px) {
    width: 80%;
  }
}

我是一名初级开发人员，我发现第二种方法更容易使用和理解。然而，我的老板告诉我使用第一种方法。老实说，我到处都找过一个示例项目，它使用了我喜欢的第二种方法，但找不到

所以我的问题是为什么

在我看来，如果我想在本例中添加一些类来包装容器，那么在方法1中，我需要在每个断点中添加它，而在方法2中，我只需要添加一次！

---

那么第一种方法是如何正确实践的呢？我遗漏了什么？

我认为这是一个很好的问题，我经常觉得这种分歧是由老派程序员造成的，他们习惯于在SASS之前生活，拒绝进入SASS和嵌套CSS的新时代

方法1

专业人士

@media screen and (max-width: 768px) {
  // All the stuff
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  // All the stuff
}

您可以将每个媒体查询的断点放在一个地方，以便 当您要进行多个更改时，更容易找到诊断 添加到页面模板

缺点

@media screen and (max-width: 768px) {
  // All the stuff
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  // All the stuff
}

这很混乱，最终会出现多个类声明 位置，因此在编辑一个元素或添加新元素时 元素添加到HTML中，最后必须跨多个 难以追踪的区域

它需要大量的上下滚动才能找到媒体 查询问题，然后编辑单个类元素

方法2

专业人士

@media screen and (max-width: 768px) {
  // All the stuff
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  // All the stuff
}

所有东西都放在一个地方，很容易找到一个 类并编辑其中使用的所有断点

还可以快速添加新断点以应用快速修复

快速浏览也更容易阅读和理解

缺点

@media screen and (max-width: 768px) {
  // All the stuff
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  // All the stuff
}

老派开发者可能不喜欢它

有时候不好。如果你有一个固定的模板，你知道 这不会改变的。将整个CSS放入整个页面或 面积使其更易于使用。您可以编辑多个类 对于单个断点，所有断点都位于一个位置

结论

这要视情况而定。我不认为这是我的方式或高速公路类型的场景，它是两者的混合

在构建组件时，您通常希望将CSS保留在一个块中，如方法1中所示。但是，当您诊断一个已组合在一起的整个站点并为特定元素插入单个断点时，使用方法2就更有意义了

---

我发现，我们创建的网站越多，我就越擅长找出最适合这种情况的方法，上面的规则往往会引导我走向正确的方向。

非常好的问题，我认为这值得一个完整的话题，这个答案有助于@Unbrand分享的所有东西

我不认为在决定哪种做法更好或是最佳做法时有对错之分。坚持一个并不意味着一切都是正确的，这都是关于造型师习惯的方法，最重要的是它是如何使用的，成败都在这里

我想您已经知道并熟悉这两种方法的最终编译CSS，当然，最终包大小也是优化的一个考虑因素

这就是方法2似乎失去意义的地方

方法2 SCSS：

.container {
  width: 100%;
  
  @media screen and (min-width: 768px) {
    width: 50%;
  }

  &.red {
    @media screen and (min-width: 768px) {
      background: red;
      width: 75%;
    }
  }
}

.container { width: 100%; }

@media screen and (min-width: 768px) {
  .container {
    width: 50%;
  }
}
@media screen and (min-width: 768px) {
  .container.red {
    background: red;
    width: 75%;
  }
}

这就是上面CSS的编译方式，您可能会清楚地看到重复的字符串。扩展到一个真正的项目，这很可能是一件需要考虑的事情。 方法2 CSS：

.container {
  width: 100%;
  
  @media screen and (min-width: 768px) {
    width: 50%;
  }

  &.red {
    @media screen and (min-width: 768px) {
      background: red;
      width: 75%;
    }
  }
}

.container { width: 100%; }

@media screen and (min-width: 768px) {
  .container {
    width: 50%;
  }
}
@media screen and (min-width: 768px) {
  .container.red {
    background: red;
    width: 75%;
  }
}

M1您将主要在旧项目中看到，可能要追溯到2015年之前，而且每个响应查询可能都会在一个单独的文件中。例如：

响应式.mobile.scss

@media screen and (max-width: 768px) {
  // All the stuff
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  // All the stuff
}

响应灵敏的.tablet.scss

@media screen and (max-width: 768px) {
  // All the stuff
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  // All the stuff
}

在过去，我曾经处理过一个项目，当你有4个响应性查询时，像这样的响应性问题就变成了一场噩梦（另外，视网膜或纵向/横向都有自己的位置）。你在维护这样一个项目时会遇到麻烦，你不知道一个变更可能会影响其他变更，而且由于某种原因，你的客户会改变主意。在这样一个场景中，他也希望手机应用人像平板电脑，我相信你知道这会导致什么

因此，M2节省了时间

在web应用程序的现代时代，事情变得“组件化”，我认为M1不再有用，出于某种原因，你会看到很多FE教程推出M2，原因很简单。很干净，直截了当。忘了在响应上下文之间切换吧，这种方法证明了FE人员适应其风格的方式是有用的

新手/年轻人的方法2

.container {
  width: 100%;

  .button {
    background: red;

    @media screen and (min-width: 768px) {
      background: green;
    }
  }

  &.red {
    background: red;
    
    @media screen and (min-width: 768px) {
      background: darken(red, .15);
      width: 75%;
    }
  }
  
  @media screen and (min-width: 768px) {
    width: 50%;
  }
}

.container {
  width: 100%;

  .button {
    background: red;
  }

  &.red {
    background: red;
  }
  
  @media screen and (min-width: 768px) {
    width: 50%;

    .button {
      background: green;
    }

    &.red {
      background: darken(red, .15);
      width: 75%;
    }
  }
}

由于它的简单，M2成为人们熟悉的东西，直到它的用途出错

实际上，M1是关于在多个位置/文件中使用样式。每个响应样式都位于其自己的文件中，M2是关于组件的样式，其中所有样式都位于一个位置

想想这个场景，这也会成为维护的噩梦：

方法2的响应查询混合不良

.container {
  width: 100%;

  .button {
    background: red;

    @media screen and (min-width: 768px) {
      background: green;
    }
  }

  &.red {
    background: red;
    
    @media screen and (min-width: 768px) {
      background: darken(red, .15);
      width: 75%;
    }
  }
  
  @media screen and (min-width: 768px) {
    width: 50%;
  }
}

.container {
  width: 100%;

  .button {
    background: red;
  }

  &.red {
    background: red;
  }
  
  @media screen and (min-width: 768px) {
    width: 50%;

    .button {
      background: green;
    }

    &.red {
      background: darken(red, .15);
      width: 75%;
    }
  }
}

方法2与响应查询的良好混合

.container {
  width: 100%;

  .button {
    background: red;

    @media screen and (min-width: 768px) {
      background: green;
    }
  }

  &.red {
    background: red;
    
    @media screen and (min-width: 768px) {
      background: darken(red, .15);
      width: 75%;
    }
  }
  
  @media screen and (min-width: 768px) {
    width: 50%;
  }
}

.container {
  width: 100%;

  .button {
    background: red;
  }

  &.red {
    background: red;
  }
  
  @media screen and (min-width: 768px) {
    width: 50%;

    .button {
      background: green;
    }

    &.red {
      background: darken(red, .15);
      width: 75%;
    }
  }
}

第一个块是新手在第一次尝试时会尝试的M2，而不会识别最终结果。该示例只提供了一个媒体查询，请考虑多个查询

当然，第二个是有经验的人，他使用了M2，很明显