在前端开发中，我们经常需要针对不同的设备和屏幕尺寸来优化网页布局和样式。而 @media 查询就是一种用于定义不同媒体类型和特定条件下的 CSS 样式的方法。在 Less 中，我们可以通过 @media 查询来实现响应式设计和布局。
什么是 @media 查询？
@media 查询是 CSS3 中的一个功能，它可以根据不同的媒体类型和条件来定义不同的样式。例如，我们可以通过 @media 查询来定义针对不同屏幕尺寸的样式，或者针对不同的设备类型（如打印机）来定义样式。
@media 查询的语法如下：
------ --------- ------------ ------ -------- -
-- --- ----- --
-其中，mediatype 表示媒体类型，可以是 all、print、screen 等。media feature 表示媒体条件，可以是屏幕分辨率、屏幕宽度、设备方向等。and、not、only 是逻辑运算符，用于组合多个媒体条件。
例如，以下是一个针对宽屏设备的 @media 查询：
------ ------ --- ----------- ------- -
-- --- ----- --- ---- ------- --
-在 Less 中，我们可以使用 @media 规则来定义 @media 查询。例如，以下是一个在 Less 中定义的针对宽屏设备的 @media 查询：
------ ------ --- ----------- ------- -
---- -
---------- -----
-
-在上面的例子中，我们使用 @media 规则来定义了一个针对屏幕宽度大于等于 1200px 的屏幕的样式规则。在这个规则中，我们将 body 元素的字体大小设置为 16px。
除了媒体条件，我们还可以在 @media 查询中使用 Less 变量和函数。例如，以下是一个在 Less 中定义的针对 Retina 屏幕的 @media 查询：
-------- ---------------------------------- --- ---------------- ---------
------ ------- -
-- --- ----- --- ------ ------- --
-在上面的例子中，我们使用了一个 Less 变量 @retina 来定义了一个针对 Retina 屏幕的媒体条件。这个条件使用了两个 CSS3 特性：-webkit-min-device-pixel-ratio 和 min-resolution。我们可以通过 Less 的字符串插值语法将这个条件作为参数传递给 @media 规则。
总结
在本文中，我们介绍了 @media 查询的基本语法和用法，并演示了如何在 Less 中使用 @media 查询来实现响应式设计和布局。通过掌握 @media 查询的使用方法，我们可以更好地适应不同的设备和屏幕尺寸，提高网页的可用性和用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f4f5e32b3ccec22fd2443a