SASS 中的每个像素都有个故事：对 REM 的了解、使用及调试等方法-JavaScript中文网-JavaScript教程资源分享门户

什么是 REM

REM 是 CSS3 中新增的一个单位，它指的是“根元素字体大小”的缩写（root em），即 html 元素的字体大小。相比于 px 单位，使用 REM 有以下优势：

样式表随字体大小适配——当用户调整浏览器字体大小时，页面中的所有尺寸都会按照相同比例进行调整。
对可访问性友好——为视力受损的用户提供更好的可读性和可用性。

如何使用 REM

使用 REM 相对简单，只需将需要设置的尺寸除以根元素字体大小即可。例如，如果根元素字体大小是 16px，要将一个盒子的宽度设置为 200px，可以这样写：

.box {
  width: 12.5rem; // 200px / 16px = 12.5rem
}

但在实际开发中，根元素的字体大小不一定是固定的，可能会因为屏幕大小、设备类型等因素而变化。这时候，可以通过 JavaScript 动态计算根元素字体大小，在样式表中使用 REM 实现响应式布局。下面是一个基本的实现方式：

// javascriptcn.com 代码示例
function setRootFontSize() {
  var width = Math.min(document.documentElement.clientWidth, 640);
  // 计算根元素字体大小，这里的比例可以根据项目需要进行修改
  var rootFontSize = 16 * (width / 320); 
  document.documentElement.style.fontSize = rootFontSize + 'px';
}

setRootFontSize();

window.addEventListener('resize', setRootFontSize);

可以看到，这个函数会计算屏幕宽度并动态设置根元素字体大小。在样式表中使用 REM 单位时，就能够实现简单的响应式布局了。

如何调试 REM

虽然使用 REM 可以为我们带来方便和自适应效果，但有些情况下也可能会导致尺寸计算出现偏差或者不准确。例如，在某些浏览器中，用户放大页面字体大小后，使用 REM 单位的布局会出现错乱。

为了解决这些问题，我们可以通过调试 REM 的方式定位问题所在。一般来说，调试 REM 主要分为以下几步：

查看浏览器是否支持 REM 单位——如果不支持 REM，说明应用程序存在兼容性问题。
检查应用程序字体大小设置是否正确——包括各种字体大小、行高等与 REM 单位相关的属性。
确认 JavaScript 动态计算根元素字体大小的代码是否正确——确认根据比值计算出的根元素字体大小是否准确，以及该代码是否在所有情况下都被正确执行。
使用浏览器开发者工具中提供的 REM 相关调试功能——如 Chrome 开发者工具中的 EM/REM 设置、REM 应用程序视图等。

总之，找到问题并解决它们需要一定的经验和技巧。当我们深入学习和使用 REM 单位时，也需要细心总结并不断完善自己的调试方案。

示例代码

// javascriptcn.com 代码示例
// 设计尺寸为 640px 宽的移动端样式
// 根据设计图比例，这里将根元素字体大小设置为 16px
html {
  font-size: 16px;
}

// 盒子宽度为 200px，在不同尺寸屏幕上会根据

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/651ae5cc95b1f8cacd2b0cc5) ，转载请注明来源
本文地址：[https://www.javascriptcn.com/post/651ae5cc95b1f8cacd2b0cc5](https://www.javascriptcn.com/post/651ae5cc95b1f8cacd2b0cc5)