解析断点最佳实践答案

【问题标题】：Resolution breakpoints best practice解析断点最佳实践
【发布时间】：2021-09-23 07:34:27
【问题描述】：

在 CSS 中使用断点的最佳做法是什么？我需要有一个移动断点、平板电脑 (768*1024) 和桌面。

是 sass 变量吗？ CSS 自定义属性可能是其他方式吗？

【问题讨论】：

【解决方案1】：

例如：

@media only screen and (max-width: 600px) {
  body {
    background-color: #f00;
  }
  /* css here will take effect when the query is true */
}

当屏幕宽度小于等于 600 像素时，这会将 body 的 background-color 变为 #f00（红色）。

【讨论】：

【解决方案2】：

所以我发现有两种最常用的方法来处理解析断点。第一个是在 scss 变量中写断点，然后将它们用作文字（插值）。

$desktop: 'screen and (min-width:1024px)';

然后像这样使用它：

@media #{$dektop} {
color:red;}

我更喜欢的第二种方法是使用带有 @content 的 mixins

@mixin on-dektop {
@media screen and (min-width:1024px) {
@content }
}

然后像这样使用它：

@include on-desktop{
color:red;
}

【讨论】：