什么是媒体查询？
媒体查询是一种 CSS 技术，用于根据设备的特性（如屏幕大小、分辨率、方向等）来应用不同的样式。通过媒体查询，我们可以让网站在不同的设备上呈现出不同的样式，以提高用户体验。
LESS 中的媒体查询
在 LESS 中，我们可以使用 @media 规则来定义媒体查询样式。@media 规则的语法如下：
------ ---------- --- -------------------- - -- --- -- -- -
其中，media-type 表示媒体类型，如 screen、print、speech 等；media-feature-rule 表示媒体特性，如 min-width、max-width、orientation 等。
下面是一个简单的示例，当屏幕宽度小于等于 768px 时，应用红色背景色：
------ ------ --- ----------- ------ -
---- -
----------------- ----
-
-媒体查询的混合宏
为了方便在 LESS 中使用媒体查询，我们可以定义一个混合宏（Mixin），用于生成带媒体查询的样式。下面是一个示例：
-- -----
--------------------- -
------ ----------- ------ -
---------
-
-
-- -----
--- -
----------------- -----
---------------
----------------- ----
---
-在上面的示例中，我们定义了一个名为 .mobile-first 的混合宏，用于生成在移动设备上生效的样式。在 div 元素中，我们使用 .mobile-first 混合宏来定义带媒体查询的样式，当屏幕宽度小于等于 767px 时，背景色为红色。
总结
在 LESS 中定义媒体查询样式，可以通过 @media 规则和混合宏来实现。通过使用媒体查询，我们可以根据设备的特性来应用不同的样式，以提高用户体验。在实际项目中，媒体查询是前端开发不可或缺的技术之一。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6580267fd2f5e1655db49f63