什么是 @media 查询？
在 web 开发中，我们通常需要为不同的屏幕尺寸或设备类型设计不同的样式，比如手机、平板、电脑等等。而 @media 查询可以让我们针对不同的屏幕和设备应用不同的 CSS 样式。
在 CSS 中，我们可以使用 @media 规则来实现这个功能：
@media (max-width: 768px) {
/* 当视口宽度小于等于 768px 时应用以下样式 */
body { background-color: pink; }
}这个规则告诉浏览器，当视口宽度小于等于 768px 时，应用 body 的背景色为粉色。
在 Sass 中，我们同样可以使用 @media 查询，但是有一些需要注意的地方。
Sass 中的 @media 查询
在 Sass 中，@media 查询与普通的 CSS 一样，但是我们可以在其中使用 Sass 变量、混合宏等功能，这使得我们可以更方便地编写复杂的 @media 查询。
举个例子，我们可以定义一个带有 Sass 变量的 @media 查询：
-- -------------------- ---- -------
----------- ------
------------ -------
------ ----------- ----------- -
--------- -
-------- -----
-
-
------ ----------- ------------ -
--------- -
-------- ------
-
-这个例子中，我们使用了 Sass 变量 $bp-tablet 和 $bp-desktop 来定义断点。在视口宽度大于等于 $bp-tablet 时，.main-nav 元素会被隐藏；在视口宽度大于等于 $bp-desktop 时，.main-nav 元素会显示出来。
我们还可以使用混合宏来编写复杂的样式：
-- -------------------- ---- -------
------ ------------------------ -------- -
------ -------
------- --------
------ ----------- ----------- -
------ -----
------- -----
-
-
------ -
-------- ----------------------- -------
-在这个例子中，我们定义了一个混合宏 responsive-image，它会让图片在不同宽度的设备上有不同的表现。在视口宽度小于等于 $bp-tablet 时，图片的宽度会变成 100%。
注意事项
虽然 @media 查询在 Sass 中表现出了很强的编程性，但是我们在编写代码的时候仍然需要注意以下几点：
- 避免写重复的查询。重复的代码会增加文件大小以及编译时间，降低性能。
- 使用适当的命名。对于常见的屏幕尺寸，我们可以使用类似
tablet、desktop的命名方式，避免使用过于宽泛的名字，比如small、medium、large。 - 记得添加默认样式。即使我们添加了 @media 查询，我们仍然需要为默认情况添加样式。否则，当浏览器不支持 @media 查询时，会出现无样式的情况。
总结
使用 @media 查询可以帮助我们编写更加灵活的 CSS，同时在 Sass 中可以更方便地实现这一目标。在编写代码的过程中，我们需要注意避免重复的查询、适当命名以及添加默认样式，来提高代码的可读性和执行效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654d56b67d4982a6eb6b4da7