解决 LESS 中媒体查询不起作用的问题，让你的样式表更成熟-JavaScript中文网-JavaScript教程资源分享门户

LESS 是一种动态样式语言，它使用类似 CSS 的语法，但提供了更多的功能和特性，可以让你的样式表更加灵活、易于维护。其中，媒体查询是实现响应式布局的重要手段之一。然而，在 LESS 中使用媒体查询时，有时会遇到某些问题，比如媒体查询不起作用。这篇文章将介绍如何解决 LESS 中媒体查询不起作用的问题，并给出示例代码和技巧，帮助你让你的样式表更加成熟。

问题描述

常见的 LESS 代码，如下所示：

@media (max-width: 750px) {
  .container {
    max-width: 100%;
  }
}

当 LESS 代码编译成 CSS 代码之后，会得到类似如下的代码：

@media (max-width: 750px) {
  .container {
    max-width: 100%;
  }
}

这段代码是没问题的，但有时候，你可能会发现媒体查询的规则并没有起作用，比如：

@media (max-width: 750px) {
  .container {
    max-width: 100%;
  }
}

这段代码并没有起作用，实际上，它会被解析成如下的 CSS 代码：

// javascriptcn.com 代码示例
@media (max-width: 750px) {
  .container {
    max-width: 100%;
  }
}

.container {
  max-width: 1200px;
}

这显然不是我们想要的结果，这时就需要解决它。

解决方法

解决这个问题其实很简单，只需要给媒体查询添加一个小括号，在规则前面加上一个或多个空格即可。如下所示：

@media (max-width: 750px) {
  .container {
    max-width: 100%;
  }
}

这个问题的原因是 LESS 编译器在处理这段代码时，将整个媒体查询都作为了一个属性，而不是一个媒体查询规则。在 LESS 中，属性是不能包含其他属性的，因此，编译器会将整个代码都当做普通的 CSS 属性来处理。如果给媒体查询添加一个小括号，就会告诉编译器将其视为一个独立的媒体查询规则。

示例代码

下面是一个示例代码，展示了如何使用 LESS 中的媒体查询：

// javascriptcn.com 代码示例
// 根据设备宽度调整字体大小
@desktop: ~"(min-width: 992px)";
@tablet: ~"(min-width: 768px) and (max-width: 991px)";
@mobile: ~"(max-width: 767px)";

// 容器样式
.container {
  margin: 0 auto;
  max-width: 1200px;

  // 在不同设备上设置不同的样式
  @media @desktop {
    max-width: 960px;
  }

  @media @mobile {
    padding: 20px;
  }
}

在这个例子中，我们定义了三个媒体查询变量：@desktop、@tablet 和 @mobile。它们定义了不同设备宽度下的响应式样式。在容器样式中，我们使用了这些媒体查询变量，通过 LESS 的语法，在不同设备上设置不同的样式。

总结

在 LESS 中使用媒体查询时，可能会遇到媒体查询不起作用的问题。这个问题的解决方法很简单，只需要给媒体查询添加一个小括号，并在规则前面加上一个或多个空格即可。通过这个小技巧，我们可以更加灵活、方便地使用 LESS 的媒体查询，实现响应式布局。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654f4e137d4982a6eb842c7c