在前端开发中，为了让网页布局在不同设备上都能够呈现出最佳效果，我们需要使用媒体查询（media queries）来定义不同的css样式。而 LESS 是一种加强版的 CSS 语言，允许使用变量、嵌套规则、函数等高级功能，更加便捷而强大。在本文中，我们将探讨如何在 LESS 中使用 media queries。
定义媒体查询
LESS 中定义媒体查询可以使用 @media 规则，在 LESS 中使用与在纯 CSS 中使用的方式相同。我们可以在其中定义一段 CSS 样式，使其仅当特定的某些属性（如 width 或 height）满足特定条件时应用。示例代码如下：
-- -------------------- ---- -------
-- - ---- ---------
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-
-- -- --- -------
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-上面的代码示例中，我们定义了两个媒体查询，一个是在屏幕宽度大于 480 像素时应用的样式，另一个是在屏幕宽度小于 480 像素时应用的样式。在 LESS 中定义媒体查询时，我们可以使用变量来存储一些媒体查询中经常使用的属性值，便于维护和调整。
媒体查询嵌套
在LESS中，媒体查询可以被嵌套在其他规则内，使代码更加简洁有序。例如，我们经常需要定义一些不同状态的按钮样式，可以如下进行嵌套：
-- -------------------- ---- -------
---- -
---------------------
-------- -----
---------- -----
------- -
----------------- -----
-
-- ----------
------ ------ --- ----------- ------ -
---------- -----
-------- ----
-
-上述代码中，我们定义了一个 .btn 类型的样式，其中的 :hover 选择器表示当鼠标滑过按钮时应用的样式。我们将媒体查询嵌套在 .btn 选择器中，使在不同设备上呈现出的按钮样式更加合适。
使用 mixin 实现媒体查询
除了定义媒体查询外，我们还可以使用LESS mixin 的方式实现媒体查询，以便于我们在代码中复用媒体查询的样式。例如，我们可以定义一个名为 media-queries 的 mixin，将媒体查询的样式封装在其中，然后在需要的地方调用。示例代码如下：
-- -------------------- ---- -------
-- -- -----
-------------------- -
------ ------ -
-- ----
---------
-
-
-- -- -----
---- -
-------- -------------
-------- -----
---------- -----
------- -
----------------- -----
-
-- -- -----
-------------------- --- ----------- -------- -
---------- -----
-------- ----
-
-上述代码中，我们首先定义一个名为 media-query 的 mixin，用于实现媒体查询。然后在 .btn 选择器中，调用了这个 mixin，传入了一个 screen and (max-width: 480px) 的参数，并设置了一些样式，使该 mixin 只在特定的媒体查询条件下生效。
总结
在这篇文章中，我们了解了如何在 LESS 中使用媒体查询，在定义媒体查询、媒体查询嵌套、使用 mixin 等方面都进行了详细介绍。更合理地使用媒体查询可以使我们的前端开发更加高效，使网页在各种设备上呈现出最佳效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f0a8b968c7c53b0d6cfcc