如何在 LESS 中使用 media query-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要为不同的设备和屏幕大小编写不同的 CSS 样式，以保证网站在不同设备上的显示效果。为了实现这一目标，我们可以使用 CSS3 中的媒体查询（media query）。

LESS 是一种 CSS 预处理器，它可以让我们使用类似编程语言的方式来编写 CSS，包括变量、函数、嵌套、继承等功能。在 LESS 中使用媒体查询也非常简单，本文将介绍如何在 LESS 中使用媒体查询。

媒体查询的语法

媒体查询是 CSS3 中的一个重要特性，它可以根据不同的媒体类型和媒体特性，为不同的设备和屏幕大小编写不同的 CSS 样式。媒体查询的语法如下：

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

其中，mediatype 表示媒体类型，可以是 all、print、screen 等；media feature 表示媒体特性，可以是 width、height、orientation 等；CSS rules 表示针对该媒体类型和媒体特性的 CSS 样式。

例如，下面的代码表示在屏幕宽度小于等于 768 像素时，应用 .mobile 类的 CSS 样式：

@media screen and (max-width: 768px) {
  .mobile {
    font-size: 14px;
  }
}

在 LESS 中使用媒体查询

在 LESS 中，我们可以使用 @media 规则来定义媒体查询。@media 规则的语法与 CSS 中的 @media 规则类似，如下所示：

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

其中，mediatype 和 media feature 的语法与 CSS 中的相同，LESS rules 表示针对该媒体类型和媒体特性的 LESS 样式。

例如，下面的代码表示在屏幕宽度小于等于 768 像素时，应用 .mobile 类的 LESS 样式：

@media screen and (max-width: 768px) {
  .mobile {
    font-size: 14px;
  }
}

此外，我们还可以在 LESS 中使用嵌套语法来编写媒体查询。例如，下面的代码表示在屏幕宽度小于等于 768 像素时，应用 .mobile 类的 LESS 样式：

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

示例代码

下面是一个完整的示例代码，演示如何在 LESS 中使用媒体查询：

-- -------------------- ---- -------
-- ----
--------------- --------

-- -- ------- -
------- -
  -------- -------------
  -------- --- -----
  ---------- -----
  ------------ -----
  ------ -----
  ----------------- ---------------
  -------------- ----
  
  -- --------- --- --------- ---- --
  ------ ------ --- ----------- ------ -
    ---------- -----
    -------- --- -----
  -
-

以上代码定义了一个变量 @primary-color，表示主色调，然后定义了一个 .button 类，表示按钮样式。在 .button 类中，我们使用了 @media 规则来定义媒体查询，以适应不同的屏幕大小。

总结

在 LESS 中使用媒体查询非常简单，只需要使用 @media 规则即可。通过媒体查询，我们可以根据不同的屏幕大小和设备类型，为网站编写不同的 CSS 样式，以保证网站在不同设备上的显示效果。希望本文能够帮助大家更好地理解和使用媒体查询。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64509373980a9b385b991c6c