在前端开发中，CSS 单位是必不可少的。其中，rem 和 em 是相对单位，使用它们可以避免在不同屏幕尺寸下布局出现问题。本文将介绍如何在 LESS 中使用 rem 和 em 单位。
rem 的使用
rem 是相对于根元素 html 的字体大小而言的，我们可以通过设置根元素的字体大小来控制整个页面的大小。通常，我们将根元素的字体大小设置为 16px，这是因为绝大多数浏览器的默认字体大小就是 16px。
在 LESS 中，我们可以使用函数 rem() 来设置 rem 单位。例如，如果要将字体大小设置为 20px，可以这样写：
font-size: rem(20);
当我们需要使用变量作为 rem 单位时，我们需要将变量传入 rem() 函数中，例如：
@font-size: 20; font-size: rem(@font-size);
此外，我们需要在 HTML 中手动设置根元素的字体大小，例如：
<style>
html {
font-size: 16px;
}
</style>em 的使用
em 是相对于当前元素的字体大小而言的。如果一个元素的字体大小为 16px，那么它的 1em 就相当于 16px。如果一个元素的字体大小为 20px，那么它的 1em 就相当于 20px。
在 LESS 中，我们可以使用函数 em() 来设置 em 单位。例如，如果要将字体大小设置为 1.25em，可以这样写：
font-size: em(1.25);
当我们需要使用变量作为 em 单位时，我们需要将变量传入 em() 函数中，例如：
@font-size: 1.25; font-size: em(@font-size);
什么时候使用 rem 和 em 单位
当我们需要将一个元素的大小设置为相对于当前元素的字体大小而言时，使用 em 单位可以很好地实现。例如，我们设置一个容器的宽度为 30em，这样无论字体大小为多少，这个容器的宽度都会随之而变化。
而当我们需要将一个元素的大小设置为相对于根元素 html 的字体大小而言时，使用 rem 单位可以很好地实现。例如，我们设置一个标题的字体大小为 2rem，这样无论在不同的屏幕尺寸下，这个标题的大小都会是相同的。
示例代码
-- -------------------- ---- ------- ---- - ---------- ----- - ---------- - ------ ----- ---------- ---- -- --- -- ------ ---- -------- -- - ------ - ---------- ----- -- --- --- ------ ---- -------- -- -
以上示例代码展示了如何在 LESS 中使用 rem 和 em 单位。希望本文能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67825d04935627c90003eacd
