在前端开发中，我们经常需要为不同的屏幕尺寸和设备类型提供不同的样式，以达到更好的用户体验。而媒体查询是实现这一目标的主要手段之一。在 LESS 中，我们可以通过嵌套规则和变量等特性，更加方便地管理和使用媒体查询。
基础语法
媒体查询是一种条件式语句，用于根据设备的特征来应用不同的 CSS 样式。它的基本语法如下：
@media mediatype and (media feature) {
/* CSS rules */
}mediatype表示媒体类型，例如screen、print、speech等。media feature表示媒体特征，例如屏幕宽度、设备方向、分辨率等。CSS rules是对应的样式规则。
例如，下面是一个简单的媒体查询样式：
@media screen and (max-width: 768px) {
body {
font-size: 16px;
}
}这个样式表示，在屏幕宽度小于等于 768px 时，将 body 元素的字体大小设置为 16px。
嵌套规则
在 LESS 中，我们可以使用嵌套规则来更加方便地管理媒体查询。例如，我们可以将媒体查询的样式规则嵌套在选择器中，如下所示：
h1 {
font-size: 24px;
@media screen and (max-width: 768px) {
font-size: 20px;
}
}这个样式表示，在屏幕宽度小于等于 768px 时，将 h1 元素的字体大小设置为 20px。
我们也可以使用嵌套规则来管理多个媒体查询，例如：
-- -------------------- ---- -------
-- -
---------- -----
------ ------ --- ----------- ------ -
---------- -----
-
------ ------ --- ----------- ------ -
---------- -----
-
-这个样式表示，在屏幕宽度小于等于 768px 时，将 h1 元素的字体大小设置为 20px；在屏幕宽度小于等于 480px 时，将字体大小设置为 16px。
变量
在 LESS 中，我们可以使用变量来管理媒体查询的参数。例如，我们可以将屏幕宽度的阈值定义为一个变量，如下所示：
@screen-sm: 768px;
h1 {
font-size: 24px;
@media screen and (max-width: @screen-sm) {
font-size: 20px;
}
}这个样式与前面的例子相同，只不过将屏幕宽度的阈值定义为了一个变量。
使用变量可以让我们更加方便地管理和修改媒体查询的参数，同时也可以提高代码的可读性和可维护性。
深度嵌套
在 LESS 中，我们可以使用深度嵌套来管理复杂的媒体查询。例如，我们可以嵌套多个选择器和媒体查询，如下所示：
-- -------------------- ---- -------
---------- -
------- -
---------- -----
------ ------ --- ----------- ----------- -
---------- -----
-
-
----- -
---------- -----
------ ------ --- ----------- ----------- -
---------- -----
-
-
------- -
---------- -----
------ ------ --- ----------- ----------- -
---------- -----
-
-
-这个样式表示，在屏幕宽度小于等于 768px 时，将 .header、.body 和 .footer 元素的字体大小分别设置为 20px、14px 和 10px。
使用深度嵌套可以让我们更加方便地管理和组织复杂的媒体查询，同时也可以提高代码的可读性和可维护性。
示例代码
下面是一个完整的示例代码，演示了如何使用 LESS 中的媒体查询管理不同屏幕尺寸下的样式：
-- -------------------- ---- -------
----------- ------
----------- ------
----------- ------
----------- -------
---------- -
------ -----
------ ------ --- ----------- ----------- -
------ ------
-
------ ------ --- ----------- ----------- -
------ ------
-
------ ------ --- ----------- ----------- -
------ -------
-
------- -
---------- -----
------ ------ --- ----------- ----------- -
---------- -----
-
-
----- -
---------- -----
------ ------ --- ----------- ----------- -
---------- -----
-
-
------- -
---------- -----
------ ------ --- ----------- ----------- -
---------- -----
-
-
-这个样式表示，在屏幕宽度小于等于 480px 时，将 .header、.body 和 .footer 元素的字体大小分别设置为 20px、14px 和 10px；在屏幕宽度在 480px 和 768px 之间时，将容器的宽度设置为 100%；在屏幕宽度在 768px 和 992px 之间时，将容器的宽度设置为 750px；在屏幕宽度在 992px 和 1200px 之间时，将容器的宽度设置为 970px；在屏幕宽度大于 1200px 时，将容器的宽度设置为 1170px。
总结
LESS 中的媒体查询提供了一种方便、灵活和可维护的样式管理方式，可以帮助我们更好地适配不同的屏幕尺寸和设备类型。通过嵌套规则、变量和深度嵌套等特性，我们可以更加方便地管理和使用媒体查询，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65874aaceb4cecbf2dc90e8d