在前端开发中，响应式布局是不可忽视的一部分。而实现响应式布局的关键在于媒体查询。LESS 是一款优秀的 CSS 预处理器，它的媒体查询功能非常强大，本文将介绍 LESS 中的媒体查询技巧和实践。
基本语法
LESS 中的基本媒体查询语法与 CSS 相同，只需在 CSS 属性后面加上 @media 来表示媒体查询的范围，例如：
------ ----------- ------ - -- -------- ----- ------ -- -
和普通的 CSS 语法一样，@media 后面的括号中可以使用各种 CSS 属性，如屏幕宽度、设备高度等等。
嵌套语法
LESS 中还提供了嵌套语法，可以将媒体查询的样式直接嵌套在选择器中，从而减少媒体查询的重复代码。例如：
---------- -
------ -----
------ ----------- ------ -
------ ----
-
-上面的代码表示 .container 的宽度在屏幕宽度大于等于 768px 时为 50%，否则为 100%。
变量语法
LESS 还提供了变量语法，可以在媒体查询中使用变量，从而方便了样式的生成和维护。例如：
-------- ------ ------ ----------- -------- - -- --------- ------- --------- -- -
mixin
最后，LESS 还提供了 mixin 的功能，可以将媒体查询的样式抽象成一个 mixin，便于多处复用。例如：
---------------- -
------ ----------- ------ -
------ ----
-
-
---------- -
------ -----
-----------------
-上面的代码中，.tablet-layout() 表示屏幕宽度大于等于 768px 时的样式，被定义成了一个 mixin。在 .container 中调用 .tablet-layout() 后，.container 的宽度在屏幕宽度大于等于 768px 时为 50%，否则为 100%。
总结
LESS 中的媒体查询提供了很多方便和灵活的工具，从基本语法到嵌套语法、变量和 mixin，都让我们在响应式布局中更加方便和高效。掌握这些技巧后，我们可以更加自由地设定不同屏幕尺寸的样式，让页面更具有弹性和适配性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652bc0267d4982a6ebd9e0bf