在移动端网页开发中，使用rem作为CSS单位，可以实现良好的自适应效果。本文主要介绍在LESS预处理器中使用rem进行自适应布局的方法。
rem 单位简介
rem 是相对于根元素（即html元素）的单位。它的值通常为相对于根元素字体大小的倍数。
例如，假设根元素的字体大小为16px，定义一个元素的宽度为2rem，则这个元素的宽度就是32px。如果根元素的字体大小改为20px，那么这个元素的宽度也会相应变成40px。
布局方法
定义变量
使用LESS中的变量，可以在整个样式表中使用同样的值。我们可以定义一个 remBase 变量，表示我们设计图的宽度。
@remBase: 75;
定义函数
我们可以定义一个函数来计算 rem 的值，这个函数将 px 转换成 rem。
.px2rem (@property) {
@{property}: (@property / @remBase) + rem;
}对样式属性应用函数
接下来，我们可以在样式中使用函数 .px2rem() 来应用 rem 作为单位。
h1 {
font-size: .px2rem(48px);
line-height: .px2rem(58px);
}全局统一样式
为了更好地应用该方法，我们可以在LESS中创建一个全局 mixin，以便我们在整个项目中使用。
-- -------------------- ---- ------- -- -- --- ----- --------- ----------- ------- - ------------ ------- - --------- - ---- - -- -- --- ----- -- - -------------------- ------ ---------------------- ------ -
示例代码
-- -------------------- ---- -------
--------- ---
------- ----------- -
------------ ---------- - --------- - ----
-
-- -
-------------------
---------------------
-
-- ------ --- ----- --
--------- ----------- ------- -
------------ ------- - --------- - ----
-
-- -
-------------------- ------
-总结
使用 rem 单位进行自适应布局是非常方便的，因为应用了该方法的元素将随着设备的分辨率变化而自动调整。使用LESS预处理器进一步简化了该过程，您可以在所有样式表中使用变量和 mixin，从而更轻松地控制自适应布局。
总之，使用rem单位进行自适应布局能够显著提升移动端网页的用户体验，值得Web前端工程师掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cda65c1519ea946c17446f