在移动优先的时代，我们都希望能够让网站或者 App 的布局更加灵活自适应。LESS 是一个流行的 CSS 预处理器，它可以帮助我们更加高效地编写 CSS，并且特别适合用于自适应布局。本篇文章将会介绍如何使用 LESS 进行自适应布局。
1. 设置基本变量
在使用 LESS 进行自适应布局时，最好先设置一些基本变量。这些变量通常是一些常见的尺寸，例如屏幕宽度、字体大小、边距等等。在设置变量的时候，我们可以使用 @ 符号来表示一个变量。
@screen-width: 750px; @font-size: 16px; @margin: 10px;
2. 使用媒体查询
一般来说，我们会使用媒体查询来对不同尺寸的屏幕进行布局。在 LESS 中，我们可以使用 @media 关键字来进行媒体查询。使用媒体查询的方式和 CSS 中是一样的，只不过我们可以利用变量来使代码更加简洁。
@media screen and (max-width: @screen-width) {
/* 在屏幕宽度小于 750px 的情况下执行以下样式 */
body {
font-size: @font-size * 0.8;
}
}在这个例子中，我们利用了之前设置的屏幕宽度变量来进行媒体查询。同样，我们也可以利用其他变量来设置样式。
3. 使用 Mixin
为了使代码重复利用，许多 LESS 开发者喜欢使用 Mixin。Mixin 是一种将一组属性包装为可重用的代码块的方法。使用 Mixin 的好处是可以减少代码量并且可以更易于维护。
在这个例子中，我们可以创建一个 Mixin，用于设置元素的宽度和高度。在 Mixin 中，我们可以传递参数以便在不同的地方进行调用。
.square(@size: 50px) {
width: @size;
height: @size;
}
.box {
.square();
}在这个例子中，我们创建了一个名为“square”的 Mixin，它可以设置一个正方形的宽高。我们可以使用 .box 类来调用这个 Mixin，这样 .box 元素就会变成一个正方形。
4. 使用函数
除了 Mixin 之外，我们还可以使用函数来进行自适应布局。函数是一种接收输入，并生成输出的代码块。在 LESS 中，我们可以使用内置函数或自定义函数来进行自适应布局。
在这个例子中，我们可以创建一个函数，它可以计算元素的宽度相对于屏幕宽度的百分比。在函数中，我们首先传递元素的宽度和屏幕宽度，然后将它们相除并乘以 100，即可得到元素的宽度百分比。
.width-percent(@width, @screen-width) {
width: (@width / @screen-width) * 100%;
}
.element {
.width-percent(320px, 750px);
}在这个例子中，我们创建了一个名为“width-percent”的函数，它可以根据输入的参数计算出元素宽度的百分比。在 .element 类中，我们使用这个函数来设置元素的宽度百分比。
在使用函数的时候，需要注意函数的参数类型和返回值。同时，我们也可以重载函数以便在不同情况下进行调用。
总结
在这篇文章中，我们介绍了如何使用 LESS 进行自适应布局。通过设置基本变量、使用媒体查询、使用 Mixin 和函数，我们可以更加高效地编写可维护的自适应布局代码。当然，这只是一个入门级别的例子，我们还可以利用 LESS 的其他功能进行更加复杂和高级的自适应布局。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6594101feb4cecbf2d8a3e72