LESS 中如何定义和使用媒体查询？

在现代化的前端开发中，响应式设计已经成为了一种必备的技能。而媒体查询是响应式设计的基础，它可以让我们根据不同的设备尺寸和屏幕方向来设置不同的样式。在 LESS 中，我们可以使用媒体查询来实现响应式设计，本文将详细介绍如何在 LESS 中定义和使用媒体查询。

媒体查询是什么？

媒体查询是 CSS3 中的一个重要特性，它可以根据设备的屏幕尺寸、方向、分辨率等信息来应用不同的样式。媒体查询通常是通过 @media 规则来定义的，其语法如下：

@media mediatype and (expressions) {
  /* CSS rules */
}

其中，mediatype 表示要应用媒体查询的设备类型，常见的有 all、screen、print 等；expressions 表示媒体查询的条件，如 min-width、max-width、orientation 等；CSS rules 则是要应用的样式规则。

在 LESS 中定义媒体查询

在 LESS 中，我们可以使用 @media 规则来定义媒体查询，其语法与 CSS3 中的语法基本相同。下面是一个简单的示例：

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

这段 LESS 代码定义了一个媒体查询，当屏幕宽度小于等于 768 像素时，容器的宽度将设置为 100%。在这个示例中，screen 表示要应用媒体查询的设备类型为屏幕，max-width: 768px 表示屏幕宽度小于等于 768 像素时应用样式。

在 LESS 中使用媒体查询

在 LESS 中，我们可以使用 @media 规则来定义媒体查询，然后在需要应用媒体查询的样式规则中使用 mixin 的方式来引用媒体查询。下面是一个示例：

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

.container {
  max-width: 960px;
  margin: 0 auto;

  @media screen and (max-width: 768px) {
    max-width: 100%;
  }
}

在这个示例中，我们定义了一个媒体查询，当屏幕宽度小于等于 768 像素时，容器的宽度将设置为 100%。然后在样式规则中使用 mixin 的方式来引用媒体查询，当屏幕宽度小于等于 768 像素时，容器的最大宽度将设置为 100%。

总结

在 LESS 中，我们可以使用 @media 规则来定义媒体查询，然后在需要应用媒体查询的样式规则中使用 mixin 的方式来引用媒体查询。媒体查询可以让我们根据不同的设备尺寸和屏幕方向来设置不同的样式，是响应式设计的基础。希望本文能够对你了解 LESS 中的媒体查询有所帮助。

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