如何使用 REM 实现自适应设计技巧-JavaScript中文网-JavaScript教程资源分享门户

Web 前端开发中，自适应设计已经成为了一种基本的技术要求。如何实现自适应设计呢？其中一种方法是使用 REM 布局。本文将介绍如何使用 REM 实现自适应设计技巧，包括 REM 的基本概念、如何设置 REM 值、以及如何在实际项目中应用 REM 布局。

REM 基本概念

REM 是指相对于根元素（即 HTML 元素）的字体大小来确定元素的大小。在 CSS 中，可以使用 rem 单位来设置元素的大小。例如，font-size: 1rem; 表示元素的字体大小等于根元素的字体大小。

在 REM 布局中，我们通常会将根元素的字体大小设置为一个固定值，然后使用 REM 单位来设置其他元素的大小。这样，当用户改变浏览器窗口大小或者在不同的设备上查看网站时，元素的大小会自动适应。

如何设置 REM 值

设置 REM 值的方法有两种：手动计算和使用 JavaScript。

手动计算

手动计算 REM 值需要先确定根元素的字体大小，然后根据设计稿的尺寸来计算每个元素的大小。例如，如果根元素的字体大小为 16px，而设计稿中某个元素的宽度为 200px，那么这个元素的宽度应该设置为 200 / 16 = 12.5rem。

手动计算 REM 值的缺点是比较繁琐，容易出错。

使用 JavaScript

使用 JavaScript 可以自动计算 REM 值，减少出错的可能性。具体方法是先获取根元素的字体大小，然后根据设备的宽度来计算 REM 值。例如，下面的代码可以将根元素的字体大小设置为设备宽度的 1/10：

function setRem() {
  var html = document.documentElement;
  var width = html.clientWidth;
  html.style.fontSize = width / 10 + 'px';
}
setRem();
window.addEventListener('resize', setRem);

这段代码会在页面加载时自动执行 setRem() 函数，然后在窗口大小改变时重新计算 REM 值。

在实际项目中应用 REM 布局

在实际项目中，我们通常会使用 CSS 预处理器来生成 REM 值。例如，使用 Sass 可以这样写：

$base-font-size: 16px;
html {
  font-size: $base-font-size;
}
@mixin rem($property, $value) {
  #{$property}: $value / $base-font-size + rem;
}

然后，在样式中使用 @include rem(property, value) 来生成 REM 值。例如：

.button {
  @include rem(width, 200px);
  @include rem(height, 50px);
}

这样，当根元素的字体大小改变时，所有使用 @include rem() 的元素的大小都会自动适应。

总结

使用 REM 布局可以实现自适应设计，让网站在不同的设备上都能够良好地展示。设置 REM 值的方法有手动计算和使用 JavaScript 两种。在实际项目中，可以使用 CSS 预处理器来生成 REM 值，提高开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650aa6cd95b1f8cacd5017a4