LESS 中媒体查询适配管理技巧

在前端开发中，我们经常需要为不同的屏幕尺寸和设备类型提供不同的样式，以达到更好的用户体验。而媒体查询是实现这一目标的主要手段之一。在 LESS 中，我们可以通过嵌套规则和变量等特性，更加方便地管理和使用媒体查询。

基础语法

媒体查询是一种条件式语句，用于根据设备的特征来应用不同的 CSS 样式。它的基本语法如下：

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

• mediatype 表示媒体类型，例如 screen、print、speech 等。
• media feature 表示媒体特征，例如屏幕宽度、设备方向、分辨率等。
• CSS rules 是对应的样式规则。

例如，下面是一个简单的媒体查询样式：

@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

这个样式表示，在屏幕宽度小于等于 768px 时，将 body 元素的字体大小设置为 16px。

嵌套规则

在 LESS 中，我们可以使用嵌套规则来更加方便地管理媒体查询。例如，我们可以将媒体查询的样式规则嵌套在选择器中，如下所示：

h1 {
  font-size: 24px;
  @media screen and (max-width: 768px) {
    font-size: 20px;
  }
}

这个样式表示，在屏幕宽度小于等于 768px 时，将 h1 元素的字体大小设置为 20px。

我们也可以使用嵌套规则来管理多个媒体查询，例如：

h1 {
  font-size: 24px;
  @media screen and (max-width: 768px) {
    font-size: 20px;
  }
  @media screen and (max-width: 480px) {
    font-size: 16px;
  }
}

这个样式表示，在屏幕宽度小于等于 768px 时，将 h1 元素的字体大小设置为 20px；在屏幕宽度小于等于 480px 时，将字体大小设置为 16px。

变量

在 LESS 中，我们可以使用变量来管理媒体查询的参数。例如，我们可以将屏幕宽度的阈值定义为一个变量，如下所示：

@screen-sm: 768px;

h1 {
  font-size: 24px;
  @media screen and (max-width: @screen-sm) {
    font-size: 20px;
  }
}

这个样式与前面的例子相同，只不过将屏幕宽度的阈值定义为了一个变量。

使用变量可以让我们更加方便地管理和修改媒体查询的参数，同时也可以提高代码的可读性和可维护性。

深度嵌套

在 LESS 中，我们可以使用深度嵌套来管理复杂的媒体查询。例如，我们可以嵌套多个选择器和媒体查询，如下所示：

.container {
  .header {
    font-size: 24px;
    @media screen and (max-width: @screen-sm) {
      font-size: 20px;
    }
  }
  .body {
    font-size: 16px;
    @media screen and (max-width: @screen-sm) {
      font-size: 14px;
    }
  }
  .footer {
    font-size: 12px;
    @media screen and (max-width: @screen-sm) {
      font-size: 10px;
    }
  }
}

这个样式表示，在屏幕宽度小于等于 768px 时，将 .header、.body 和 .footer 元素的字体大小分别设置为 20px、14px 和 10px。

使用深度嵌套可以让我们更加方便地管理和组织复杂的媒体查询，同时也可以提高代码的可读性和可维护性。

示例代码

下面是一个完整的示例代码，演示了如何使用 LESS 中的媒体查询管理不同屏幕尺寸下的样式：

@screen-xs: 480px;
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1200px;

.container {
  width: 100%;
  @media screen and (min-width: @screen-sm) {
    width: 750px;
  }
  @media screen and (min-width: @screen-md) {
    width: 970px;
  }
  @media screen and (min-width: @screen-lg) {
    width: 1170px;
  }
  .header {
    font-size: 24px;
    @media screen and (max-width: @screen-sm) {
      font-size: 20px;
    }
  }
  .body {
    font-size: 16px;
    @media screen and (max-width: @screen-sm) {
      font-size: 14px;
    }
  }
  .footer {
    font-size: 12px;
    @media screen and (max-width: @screen-sm) {
      font-size: 10px;
    }
  }
}

这个样式表示，在屏幕宽度小于等于 480px 时，将 .header、.body 和 .footer 元素的字体大小分别设置为 20px、14px 和 10px；在屏幕宽度在 480px 和 768px 之间时，将容器的宽度设置为 100%；在屏幕宽度在 768px 和 992px 之间时，将容器的宽度设置为 750px；在屏幕宽度在 992px 和 1200px 之间时，将容器的宽度设置为 970px；在屏幕宽度大于 1200px 时，将容器的宽度设置为 1170px。

总结

LESS 中的媒体查询提供了一种方便、灵活和可维护的样式管理方式，可以帮助我们更好地适配不同的屏幕尺寸和设备类型。通过嵌套规则、变量和深度嵌套等特性，我们可以更加方便地管理和使用媒体查询，提高代码的可读性和可维护性。

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