在现代的前端开发过程中，适配不同的设备和屏幕尺寸是必须考虑的因素。媒体查询是一种常见的解决方案，它可以让我们根据设备的特性，动态调整页面样式。LESS 是一种 CSS 预处理器，提供了更多的语法和功能，使得在 LESS 中使用媒体查询更加方便。本文将介绍媒体查询的基本用法和 LESS 中的高级用法，并提供实际的代码示例。
基本用法
媒体查询的基本语法如下：
@media (条件) {
/* 在这里定义的 CSS 规则仅在条件成立时生效 */
}其中，条件可以包括各种与设备相关的属性，例如屏幕宽度、像素密度、方向等等。
假设我们想在屏幕宽度小于 768 像素时，改变字体的颜色，可以这样写：
@media (max-width: 767px) {
body {
color: darkgray;
}
}这段代码会将 body 元素的颜色改为 darkgray，但仅在屏幕宽度小于 768px 的情况下生效。
LESS 中的媒体查询
LESS 提供了一些高级的媒体查询操作，可以更加灵活和简便地定义多个媒体查询。
混合宏
混合宏是 LESS 中比较基础的语法，它可以将一组 CSS 规则定义为一个单元，然后在需要的地方调用它。这些规则可以接受传入的参数，从而生成不同的 CSS。媒体查询可以与 mixin 配合使用，从而增加代码重用。
例如，我们可以定义一个 mixin，用于定义媒体查询：
-- -------------------- ---- -------
-- -- -----
----------------------- ------ -
------ ----------- ------- -
-- ------ --- ---------- ------ --- --
--------- -- ------ ----- --- --
-
-
-- -- -----
------- -
------ -----
---------------------- -
------ ----
-
-这段代码中，.my-media-query 定义了一个媒体查询的 mixin，接受一个宽度参数，生成一个屏幕宽度小于该值的媒体查询，然后输出 mixin 中的内容。
在 .header 中，我们调用了 .my-media-query 并传入了参数 600px。这会生成一个屏幕宽度小于 600px 的媒体查询，并在其中将 .header 的颜色改为红色。当屏幕宽度大于 600px 时，.header 的颜色还是蓝色。
嵌套语法
在 LESS 中，我们可以将媒体查询嵌套在其他规则中，使代码更加直观和易于维护。例如：
-- -------------------- ---- -------
------- -
------ -----
- -
------ ------
------- -
------ -------
-
-
------ ----------- ------ -
------ ----
- -
------ ----------
------- -
------ -------
-
-
-
-这段代码中，我们定义了一个 .header，它包含一个 a 元素。当屏幕宽度小于 600px 时，.header 的颜色将变为红色，同时 a 标签的颜色和 hover 颜色也改变。
注意，媒体查询可以嵌套在任何规则中，不仅限于 .header 这种情况。
示例代码
下面是一段综合了前面介绍内容的 LESS 代码示例，用于演示媒体查询的高级用法。
-- -------------------- ---- -------
-- -- ----- --
-------------------- ------ -
------ ----------- ------- -
---------
-
-
-- ---- --
------- -
------ -----
- -
------ ------
------- -
------ -------
-
-
-- -- ----- ----- --
----- -
------- -
------- --- ----- ------
--------- -
----------- --------------------- ------
-
---------------------- -
------------- ----
--------- -
----------- --------------------- ------
-
-
-
-
-这段代码中，我们定义了一个名为 media-query 的 mixin，用于生成媒体查询。我们还定义了一个 .header，其中包含了 a 标签和一个嵌套的 .logo 部分。.logo 中又包含边框（.border）和渐变（.gradient），并使用了媒体查询来改变边框宽度和渐变背景色。
这段代码可用于一个响应式网站的顶部导航栏，它会根据屏幕宽度不同，以不同的风格呈现。
总结
媒体查询是一个常见但重要的前端技术，它可以让我们根据设备的特性，进行动态的样式调整。在 LESS 中，我们可以使用 mixin 和嵌套语法，让媒体查询代码更加方便和易于维护。
在实际开发中，我们需要根据具体情况选择合适的媒体查询方式，并且遵循一些最佳实践，例如避免嵌套过深、使用变量和语义化命名等。
希望本文能够帮助您更好地理解 LESS 中的媒体查询，更好地进行响应式设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f6d9c980a9b385b8ed7e9