随着移动设备的普及，越来越多的网站需要适应不同大小的屏幕。在前端开发中，响应式布局成为了一种常见的设计方式。而媒体查询则成为了实现响应式布局的核心技术之一。在这篇文章中，我将介绍如何在 LESS 中使用媒体查询，实现响应式布局。
什么是媒体查询
媒体查询是 CSS3 的一项新功能，它允许在样式表中嵌入针对不同媒体类型和特定属性的条件，从而使得样式能够适应不同的输出设备。换句话说，我们可以在不同的屏幕宽度下使用不同的样式。
媒体查询语法如下：
@media mediatype and|not|only (media feature) {
/* CSS rules */
}其中，mediatype 表示媒体类型，如 all、screen、print、speechover等。media feature 表示媒体特性，如 width、height、aspect-ratio、orientation 等。and、not、only 是连接符，用于组合不同的条件。在 {} 中，可以定义针对这个媒体查询的 CSS 样式规则。
举个例子，如下所示的代码表示，当屏幕宽度小于 600px 时，字体大小为 16px；当屏幕宽度大于等于 600px 时，字体大小为 20px。
-- -------------------- ---- -------
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-如何在 LESS 中使用媒体查询
LESS 是一种 CSS 预处理器，它提供了很多有用的特性，如变量、嵌套、函数、Mixin 等。在 LESS 中，使用媒体查询也是非常方便的。
首先，我们可以定义一个 mixin，表示响应式字体大小。代码如下：
-- -------------------- ---- -------
----------------------- -
---------- ------
------ ----------- ------ -
---------- ------ - -----
-
------ ----------- ------ -
---------- ------ - -----
-
------ ----------- ------- -
---------- ------ - ---
-
-在上面的代码中，我们使用了媒体查询来指定不同屏幕宽度下的字体大小。当屏幕宽度大于等于 768px 时，字体大小为原来的 1.2 倍；当屏幕宽度大于等于 992px 时，字体大小为原来的 1.5 倍；当屏幕宽度大于等于 1200px 时，字体大小为原来的2倍。
然后，我们可以在我们的 LESS 文件中使用上面的 mixin，定义响应式的字体大小，如下所示：
h1 {
.responsive-font(16px);
}这将会使得在不同宽度的屏幕上，h1 的字体大小自适应变化。
当然，我们还可以使用 LESS 的变量和嵌套语法来进一步简化代码。如下所示的代码，定义了一个变量 @large 表示大屏幕的宽度，并使用了嵌套语法，使得代码更易读、更易维护。
-- -------------------- ---- -------
------- -------
-- -
---------- -----
------ ----------- ------ -
---------- -------
-
------ ----------- ------ -
---------- -----
-
------ ----------- ------- -
---------- -----
-
-总结
通过使用媒体查询，我们可以在不同的设备上提供不同的样式。在 LESS 中，我们可以使用 mixin 和变量来进一步简化和优化代码。掌握媒体查询和 LESS 的运用，可以使得响应式布局的开发更加方便和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651d29e495b1f8cacd4ae284