现如今，移动端设备的种类繁多，屏幕大小也不同，如何在不同设备上显示出更好的效果，是一个值得探讨的话题。其中，动态 REM 适配是实现移动端页面适配的一种方式，而使用 LESS 语言，可以更加简便地实现动态 REM 适配效果。
什么是 REM？
REM 是一种相对长度单位，相对于根元素（html） font-size 的倍数。举个例子，如果页面根元素的 font-size 设置为 16px，那么设置一个元素的 font-size 为 1.5rem，则其字体大小为 1.5 * 16 = 24px。
在移动端适配中，我们可以通过改变根元素的 font-size 的值，来调整整个页面元素的大小。
如何使用动态 REM 适配？
对于一个简单的移动端适配方案，我们可以在页面的 head 中加入下面的代码：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <script> (function(){ var width = document.documentElement.clientWidth || document.body.clientWidth; var rootSize = width / 10; document.documentElement.style.fontSize = rootSize + "px"; })(); </script>
在这个方案中，我们通过 JS 做了如下的事情：
- 设置了 viewport，让页面宽度等于设备宽度，并且禁止了用户缩放；
- 计算了设备宽度，计算出了根元素的 font-size 值，同时将其设置为当前根元素的 fontSize。
这个方案主要的问题是，当我们在 CSS 中需要调整 font-size、padding、margin 等值的时候，需要一定的计算量才能将值转化为 REM 值。此时，LESS 便能够帮我们简化这个问题。
LESS 可以帮助我们直接计算出 REM 值。基本步骤如下：
- 通过 JS 获取设备宽度；
- 根据计算出的设备宽度，计算出根元素的 font-size 值，同时将其设置为当前根元素的 fontSize；
- 在 LESS 中使用函数 calc() ，来进行 REM 值的计算。
下面是具体的实现代码：
-- -------------------- ---- ------- ------ ---- -------- ---- --- ----- --------------- ---------------------------------------------------------------------------------- ---- ------------ --- -------- ------------ --- ----- - ------------------------------------ -- -------------------------- --- -------- - ----- - --- --------------------------------------- - -------- - ----- ----- --------- ---- -- ---- --- ----- --------------------- ------------------ ------- ---------------------- -------------------------------------------------------------------------- -------展开代码
-- -------------------- ---- ------- ------------- ---- -- ------------ ----- ---- - ---------- ---------- - ------------- - ----- - -- ------- -- -- --------- -- ------------- - ---------- --------- -- -- - --- - -------- - -- ---------- -- --------- - ----------- ------- ----- ----- -- - - --- - ------- -------------- ------- ----- ----- -- - - --- - ------- - -- ---------- -- ---------- - ------ --------- -- --- - --- - -------- -展开代码
通过以上代码示例，我们可以看到，使用 LESS 拥有比普通 REM 更简单、更快捷的计算方式，有效减少了开发的成本和工作量。
结语
在实现移动端适配过程中，动态 REM 适配是一种相对简单而有效的方案，同时使用 LESS 又可以让计算 REM 时更方便、快捷。通过上述的步骤，便可以轻松实现动态 REM 适配。接下来，你只需要关注具体的开发任务，尽情开发，同时也可以选择其他的框架和方法实现移动端适配。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67beefc60c976d473a34b701
