随着移动设备的普及，让网站变得能够自适应各种不同的屏幕尺寸已经成为了前端开发的基石之一。LESS 作为一种 CSS 预处理器，为我们提供了一种简洁而强大的方式来编写自适应的 CSS 样式。在这篇文章中，我们将介绍如何使用 LESS 的媒体查询来实现自适应的布局。
媒体查询
媒体查询是一种 CSS 技术，它允许根据设备的属性和特征来应用不同的 CSS 样式。使用媒体查询，我们可以针对不同的屏幕尺寸，分别定义不同的 CSS 样式，从而实现自适应的布局。
媒体查询的语法非常简单，它通常使用 @media 声明来定义一个媒体查询，然后针对特定的媒体类型、特定的设备属性和特征，应用相应的 CSS 样式。以下是一个简单的媒体查询示例：
-- -------------------- ---- ------- ------ ------ --- ----------- ------ - -- --------- ----- --------- -- ---------- - ------ ----- - ----- - -------- ----- - -展开代码
在上面的示例中，我们使用了一个 @media 声明，指定了屏幕类型为屏幕设备，和屏幕宽度小于等于 768px 时应用的样式，也就是当访问网页的设备处于手机屏幕状态时应用上述样式。
使用 LESS 嵌套语法
LESS 的嵌套语法让样式表的层级结构更加容易理解和维护。通过 LESS 嵌套语法，我们可以编写出更简洁的代码，而不需要一遍又一遍地重复书写父级选择器。
LESS 中的嵌套语法通常使用大括号 {} 来创建嵌套块，可以在块内定义一系列样式。以下是一个简单的嵌套语法示例：
-- -------------------- ---- ------- ------- - ----------------- ----- ------ ----- -- - ---------- ----- ------------ ----- - - - ------ ----- ---------------- ----- ------- - ---------------- ---------- - - -展开代码
在这个示例中，我们使用了 #header 选择器来选择一个具有 id 为 header 的 HTML 元素。在 #header 的块内，我们定义了一系列样式，并使用了嵌套语法来定义了标题和链接的样式。
用媒体查询自适应布局
我们可以使用 LESS 的媒体查询和嵌套语法来创建自适应的布局。以下是一个典型的自适应布局的例子：
-- -------------------- ---- ------- ------- - ----------------- ----- ------ ----- -- - ---------- ----- ------------ ----- - - - ------ ----- ---------------- ----- ------- - ---------------- ---------- - - - ---------- - ------ ------ ------- - ----- ------ ------ --- ----------- ------ - ------ ----- -------- ----- - - -------- - ------ ----- ------ ------ ------ ------ --- ----------- ------ - ------ ----- ------ ----- - - ----- - ------ ------ ------ ------ ------ ------ --- ----------- ------ - ------ ----- ------ ----- - - ------- - ------ ----- -展开代码
在上面的示例中，我们用了 ID 选择器 #header，为网页的头部设置样式。接下来，我们定义了一个 container 容器来包含主体内容，设定容器宽度为 960 像素，此时我们保持这个宽度，不进行缩放，但在不同的设备上，页面的布局会根据设备宽度进行调整。由于预设的宽度定义为 960 像素，当访问者使用设备宽度比 960 像素更宽时，容器会保持为 960 像素，对于小于 960 像素的设备，我们使用 @media 声明来重新定义样式表，设定为容器宽度为 100% 以及 padding 为 10px，从而让容器适应不同的宽度设备上。
在这个示例中，我们还定义了两个子容器 sidebar 和 main，分别用于承载左侧和右侧的内容。同样在 @media 声明中，我们使用嵌套语法来重新定义这两个容器的样式，使它们能够在不同设备的屏幕尺寸下进行自适应调整。
总体来说，使用 LESS 中的媒体查询和嵌套语法来实现自适应布局，可以极大地提高前端开发的效率与可维护性。在不同的设备屏幕尺寸下，我们可以很方便地对不同的元素样式进行修改，并且使用预处理器让代码更易读、更易懂。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b96ec5306f20b3a67ccbf7
