在现代网站设计中，响应式设计已经成为了一个不可或缺的部分。为了让网站在不同的设备上都能够呈现出最佳的效果，我们需要为不同的屏幕大小和设备类型编写不同的样式。@media 查询是实现响应式设计的重要工具之一，而 LESS 则是一种流行的 CSS 预处理器，可以让我们更加高效地编写 CSS。本文将介绍如何在 LESS 中使用 @media 查询来编写响应式样式。
什么是 @media 查询
@media 查询是 CSS3 中的一个功能，它可以根据不同的媒体类型和媒体查询条件来应用不同的样式。比如，我们可以使用 @media 查询来为不同的屏幕大小编写不同的样式，或者为打印样式编写不同的样式。
@media 查询的语法如下：
@media media-type and (media-feature-rule) {
/* 在这里编写样式 */
}其中，media-type 表示媒体类型，可以是 all、print、screen 等。而 media-feature-rule 则表示媒体查询条件，可以是屏幕宽度、设备方向等。
在 LESS 中使用 @media 查询
在 LESS 中，我们可以使用嵌套语法来编写 @media 查询。具体来说，我们可以使用 @media 关键字来表示一个 @media 查询，然后在其中嵌套我们需要编写的样式。
下面是一个简单的例子，它展示了如何使用 LESS 和 @media 查询来编写响应式样式：
-- -------------------- ---- -------
-- ------ --
----------- ------
-- ------- ----- ------- --
------ ----------- ----------- -
---- -
---------- -----
-
-
-- --------- ----- ------- --
------ ----------- ----------- -
---- -
---------- -----
-
-在上面的例子中，我们定义了一个变量 @screen-sm，它表示屏幕宽度小于 576px。然后，我们使用 @media 查询来编写两个不同的样式，分别针对屏幕宽度小于 576px 和大于等于 576px。在每个 @media 查询中，我们使用嵌套语法来编写需要应用的样式。
除了使用嵌套语法外，我们还可以使用混合器来编写 @media 查询。这样可以让我们更加方便地复用样式。下面是一个使用混合器的例子：
-- -------------------- ---- -------
-- ------- --
---------------------------- -
------ ----------- ----------- -
---------- ----- - ----
-
------ ----------- ----------- -
---------- ------
-
-
-- --------------- --
-- -
----------------------------
-
-- -
----------------------------
-在上面的例子中，我们定义了一个混合器 .responsive-font-size，它接受一个参数 @size，表示字体大小。然后，我们使用 @media 查询来为不同的屏幕大小编写不同的字体大小。最后，我们使用混合器来定义 h1 和 h2 的字体大小，这样可以让我们更加方便地复用样式。
总结
在本文中，我们介绍了 @media 查询在 LESS 中的运用。通过使用 @media 查询，我们可以为不同的屏幕大小和设备类型编写不同的样式，从而实现响应式设计。同时，LESS 提供了嵌套语法和混合器等功能，让我们更加高效地编写 CSS。希望本文能够对你学习和使用 @media 查询有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66277a7bc9431a720c4230c9