什么是自适应布局
自适应布局是指使用 CSS 技术让网页在不同的设备上具有最佳的展示效果，并且不需要使用特定的设备。这个技术已经成为了现代 Web 开发不可或缺的一部分。使用自适应布局可以让网站在 PC 和移动设备上有最佳的展示效果，提升用户体验，并且兼容性更好。
LESS 的介绍
LESS 是一种 CSS 预处理器，它可以让你使用变量、嵌套、Mixin、函数等高级特性，以便更加便捷地编写 CSS。LESS 源代码会被编译成标准的 CSS 文件，可以被任意的 CSS 引用，利用了 CSS 的类领先特性，但为其添加了许多新的特性。
如何使用 LESS 实现自适应布局
下面介绍使用 LESS 实现自适应布局的技巧，帮助你提高 Web 页面的开发效率。
1. 使用 @media 标签
@media 标签是 CSS3 新引入的一个特性，它允许你针对不同的屏幕尺寸设置不同的样式。我们可以使用 @media 标签来设置不同屏幕尺寸下的页面样式。
-- -------------------- ---- ------- ------ ------------------ -- ------------ - ------ ----------------- --- ------------------ -- ------------- - ------ ------------------ -- ------------ -
2. 使用百分比布局
百分比布局是指在布局中使用百分比单位，实现自适应布局。我们可以使用 LESS 中的变量来统一管理百分比宽度，从而简化代码。
-- -------------------- ---- -------
--------------- ------
-------------- ------
-------------- ------
-----------
------ -----
-
--------
------ -----
------ ----------- ---------------
------ ----
-
------ ----------- ----------------
------ ----
-
-3. 使用 REM 单位
REM 是一种相对于根元素的单位，它可以根据根元素的 font-size 值进行缩放。使用 REM 单位可以实现完美的自适应布局。我们可以使用 LESS 中的函数来快捷计算 REM 值。
@media (min-width: @tablet-width){
.header{
font-size: rem(20);
}
}4. 使用 Mixin
Mixin 是 LESS 的一种特性，它可以让你在样式中引入其它样式。使用 Mixin 可以避免重复的代码，并且可以快速实现自适应布局的样式。
-- -------------------- ---- -------
----------- -
------ -----
------ ----------- ---------------
------ ----
-
------ ----------- ----------------
------ ----
-
--
--------
-----------
-
--------
-----------
-总结
使用 LESS 可以更方便地实现自适应布局，并且使代码更加易于维护。在实际项目中，我们可以根据不同的场景使用不同的方法，以便更好地实现自适应布局的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c36eca83d39b488177455f