什么是 REM 和 EM
在前端开发中，我们经常使用 CSS 来控制页面的样式。其中，REM 和 EM 这两个单位，是相对于像素 (px) 而言的相对单位。
- REM: 表示相对于根元素(html)的字体大小而言的值，如：rem(16px) 表示当前页面根元素字体大小为 16px 时的值。
- EM: 表示相对于当前元素的字体大小而言的值，如：em(2) 表示当前元素字体大小的 2 倍。
REM 的优势
我们知道，在不同的设备上，页面的字体大小会有所不同，比如，移动端常见的 iPhoneX 和 iPhone8 字体大小就是不一样的，这个时候我们采用 REM 作为单位，就可以根据屏幕字体大小自适应，从而实现设备自适应。
LESS 的使用
LESS 提供了一个变量的机制，可以帮助我们更加方便的使用 REM 和 EM 单位。LESS 为变量提供了三种方式：变量、混合宏和函数。
定义变量
我们可以通过定义变量来简化使用 REM 和 EM 的单位。变量的声明方式为：@变量名: 值单位;。
-- -------------------- ---- ------- -- ---- ---------- ----- --------- ---- -- ---- ------- - ---------- -------- -------- - -------- - --------- -
这种方法适合于变量被重复多次使用的情况，比如字体大小、边框大小等等。
混合宏(可带参数)
混合宏可以在定义时带有参数，也可以在使用时传参。它的声明方式为：.混合宏名称(参数值1, 参数值2, ...) { 属性集 }
-- -------------------- ---- ------- -- ----- ----------------- - ---------- ----------- - --------------- - -------- - --------- - ---------- - -- ----- ------- - --------------- ------------- -
这种方法比变量更加灵活，适合于需要传参进行变化的情况，比如 padding、margin 等等。
函数
LESS 中的函数可以实现更复杂的逻辑操作，可以通过内置函数、自定义函数等等来实现需要的效果。
-- -------------------- ---- -------
-- ---------------------
---------- ------------- - ---- -- -------- ------------- - --------- - - -------- - --- ---
----------- -
---------- ----------- - --- - -----------
-
-- ----
---- -
---------- ----------
------ ------ --- ----------- ------ -
------------ ------------- - ------
-
------ ------ --- ----------- ------ -
------------ ------------- - ----
-
-
------- -
---------
-这种方法可以实现更加复杂的逻辑，如动态计算 font-size 等等。
使用示例
接下来，我们来看一下具体如何将 REM 和 EM 混合使用。
-- -------------------- ---- -------
-- ----
---------- -----
--------- ----
-- -----
----------------- ------ ---------- -
---------- ---------- -------
---------- --------- -------
-
--------------- ------ --------- -
-------- - --------- ------ - --------- -------
-
-- --------------
---------- ------------- - ----
----------- -
---------- ----------- - --- - -----------
-
-- --
---- -
---------- ----------
------ ------ --- ----------- ------ -
------------ ------------- - ------
-
------ ------ --- ----------- ------ -
------------ ------------- - ----
-
-
------- -
---------------
-------------
---------
-在这个示例中，我们定义了 REM 和 EM 的基准值，通过混合宏和函数实现了字体大小和 padding 的自适应，并使用自定义函数计算根元素字体大小，最终得到了一个便于维护、适应不同屏幕的代码。
总结：在 LESS 中使用 REM 和 EM 单位，可以通过变量、混合宏和函数来实现不同需求的场景，利用 REM 的优势，可以实现设备自适应，从而获得更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7591248841e98943d94d7