前端开发中，响应式设计越来越受到重视。而媒体查询是一个必不可少的工具，它让我们能够根据不同设备的屏幕大小、分辨率等条件，应用不同的CSS规则，从而达到优化和适配不同设备的目的。在使用媒体查询时，我们可以使用纯CSS语句来处理，但这样的话，代码难以维护和管理，且增加了出错的可能性。因此，我们可以使用 SASS 中的媒体查询语句，来帮助我们更加高效地完成响应式网页设计。
基本语法
在使用 SASS 的媒体查询之前，我们需要了解媒体查询在原生CSS中的语法。CSS 中使用 @media 可以声明一个媒体查询块，如下：
------ ------ --- ----------------- - -- --------- ----- ---- --- -- -- -
其中，@media 是声明一个媒体查询块的关键字，screen 表示针对屏幕类型的媒体类型，min-width:768px 是一个查询条件，表示当屏幕宽度大于等于 768px 时，才会应用大括号内的 CSS 样式。
同样，在 SASS 中我们可以使用 include media 来定义媒体查询，如下：
-------- ------------- --- ----------- -------- - -- --------- ----- ---- --- -- -- -
可以看到，在 SASS 中，我们使用 @include 来引入一个 mixin，media() 是一个嵌套在 mixin 内部的函数，用来定义媒体查询条件，与上文中的普通CSS用法类似。同样，大括号内的声明块中的 CSS 样式只在查询条件为真时才会被编译输出到 CSS 中。
常见用法
SASS 中的媒体查询可以更加简洁，灵活，常见用法如下：
按屏幕参数定义媒体查询
----------- ------- --- ----------- --------- ----------- ------- --- ----------- ------ --- ----------- --------- ----------- ------- --- ----------- ------ --- ----------- -------- ----------- ------- --- ----------- -------- -------- ----------------- - -- --------- ------ ---- --- -- -- - -------- ----------------- - -- --------- --------------- ---- --- -- -- -
这里定义了屏幕参数 $screen-lg，$screen-md，$screen-sm，$screen-xs，通过在 mixin 中调用这些参数便可以定义相应的媒体查询。这样，如果我们需要修改媒体查询的条件参数，只需要修改变量值即可，不需要在多处地方修改。
嵌套使用
SASS 的语法具有嵌套特性，同样也可以嵌套使用媒体查询语句。如下：
---------- -
------ -----
-------- ----------------- -
------------- -----
-------------- -----
-
------ -
------- - -----
-------- ----------------- -
---------- -------
--------- -----
-
-
-这里定义了一个名为 .container 的样式块，在媒体查询条件下，为 .container 容器添加一定的内边距。同时，通过嵌套，在 .container 块中又定义了一个名为 .inner 的样式块，在大屏幕条件下为其定义最大宽度和内边距。
总结
媒体查询在响应式设计中发挥了重要作用，而 SASS 中媒体查询语句的作用则是使得我们能够更加灵活、方便地定义和使用媒体查询。需要注意的是，SASS 中的媒体查询语句虽然不同于纯CSS的语句，但它实际上只是对 CSS 语句的封装和简化，并没有改变 CSS 样式的具体逻辑，因此，我们在使用时仍要谨慎，遵循良好的编程规范，才能更好地发挥媒体查询的作用。
示例代码如下：
--------- -----
------
------
---------------------------
----- ----------------
-------
---------- -
------ -----
-
---------- ------ -
------- - -----
-
------ ------ --- ----------- ------ --- ----------- ------ -
---------- -
-------- - -----
-
---------- ------ -
---------- ------
-------- - -----
-
-
------ ------ --- ----------- ------ -
---------- ------ -
---------- ------
-------- - -----
-
-
------ ------ --- ----------- ------- -
---------- ------ -
---------- -------
-------- - -----
-
-
--------
-------
------
---- ------------------
---- --------------
-------------
------
------
-------
-------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/648fbf2b48841e9894de6151