LESS 中如何使用 Rem 单位？

在响应式布局的时代，如何在移动端和PC端保证样式的整体协调性和统一性是前端开发人员面临的一个重要问题。为了解决这个问题，CSS3 引入了新的单位 rem，此单位的大小以根元素 html 的字体大小为基准计算。

而在 LESS 中，使用 rem 单位可以让样式更便捷的适应不同的屏幕尺寸，在这篇文章中，我们将学习如何使用 rem 单位。

使用 rem 单位

在 LESS 中使用 rem 单位非常简单，首先需要设置 html 的 font-size，然后再将 rem 值引用到需要的样式属性中。

// javascriptcn.com 代码示例
// 设置html的font-size
html {
  font-size: 16px;
}

// 引用rem值到样式属性中
body {
  font-size: 1rem;
  padding: 10px 2rem;
}

在上述代码中，我们假定 html 的 font-size 为 16px，然后使用 1rem 作为 body 元素字体大小，并且将 2rem 作为左右边距。

通过这种方式，我们可以根据根元素的 font-size 来计算适合不同屏幕大小的 font-size 和 padding 的值。

适配不同屏幕

为了适应不同屏幕，我们需要根据不同的屏幕大小设置相应的根元素 font-size 值。在这里，我们可以通过 JavaScript 动态地获取设备的屏幕大小，并计算出适合的 rem 值。

// 设置根元素 font-size
@baseFontSize: 16;
@screenWidth: 320;

html {
  font-size: @baseFontSize + (@screenWidth - 320) * 0.3125;
}

在这里，我们设置了根元素的 font-size 值的基础大小为 16，然后通过屏幕宽度的变化来调整 font-size 的大小。使用这种方式，我们可以实现针对不同尺寸的屏幕而自动调整 rem 值的目的。

总结

LESS 中使用 rem 单位可以方便地实现响应式布局，并且通过 JavaScript 动态计算根元素的 font-size 值，可以实现适应不同屏幕尺寸的计算。在实际开发中，可以将 rem 单位作为一个重要的工具，来提高前端应用的整体协调性和统一性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654353c57d4982a6ebd0495b