LESS 是一种动态样式语言，它使用类似 CSS 的语法，但提供了更多的功能和特性，可以让你的样式表更加灵活、易于维护。其中，媒体查询是实现响应式布局的重要手段之一。然而，在 LESS 中使用媒体查询时，有时会遇到某些问题，比如媒体查询不起作用。这篇文章将介绍如何解决 LESS 中媒体查询不起作用的问题，并给出示例代码和技巧，帮助你让你的样式表更加成熟。
问题描述
常见的 LESS 代码，如下所示：
------ ----------- ------ -
---------- -
---------- -----
-
-当 LESS 代码编译成 CSS 代码之后，会得到类似如下的代码：
------ ----------- ------ -
---------- -
---------- -----
-
-这段代码是没问题的，但有时候，你可能会发现媒体查询的规则并没有起作用，比如：
------ ----------- ------ -
---------- -
---------- -----
-
-这段代码并没有起作用，实际上，它会被解析成如下的 CSS 代码：
------ ----------- ------ -
---------- -
---------- -----
-
-
---------- -
---------- -------
-这显然不是我们想要的结果，这时就需要解决它。
解决方法
解决这个问题其实很简单，只需要给媒体查询添加一个小括号，在规则前面加上一个或多个空格即可。如下所示：
------ ----------- ------ -
---------- -
---------- -----
-
-这个问题的原因是 LESS 编译器在处理这段代码时，将整个媒体查询都作为了一个属性，而不是一个媒体查询规则。在 LESS 中，属性是不能包含其他属性的，因此，编译器会将整个代码都当做普通的 CSS 属性来处理。如果给媒体查询添加一个小括号，就会告诉编译器将其视为一个独立的媒体查询规则。
示例代码
下面是一个示例代码，展示了如何使用 LESS 中的媒体查询：
-- ------------
--------- ------------- --------
-------- ------------- ------ --- ----------- --------
-------- ------------- --------
-- ----
---------- -
------- - -----
---------- -------
-- -------------
------ -------- -
---------- ------
-
------ ------- -
-------- -----
-
-在这个例子中，我们定义了三个媒体查询变量：@desktop、@tablet 和 @mobile。它们定义了不同设备宽度下的响应式样式。在容器样式中，我们使用了这些媒体查询变量，通过 LESS 的语法，在不同设备上设置不同的样式。
总结
在 LESS 中使用媒体查询时，可能会遇到媒体查询不起作用的问题。这个问题的解决方法很简单，只需要给媒体查询添加一个小括号，并在规则前面加上一个或多个空格即可。通过这个小技巧，我们可以更加灵活、方便地使用 LESS 的媒体查询，实现响应式布局。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654f4e137d4982a6eb842c7c