当前位置：首页 > JavaScript

rem js实现

2026-03-02 07:56:58JavaScript

rem js实现

理解 REM 单位

REM（Root EM）是 CSS 中的相对长度单位，基于根元素（通常是 <html>）的字体大小。1 REM 等于根元素的字体大小。默认情况下，根元素的字体大小为 16px，因此 1 REM = 16px。

在 JavaScript 中设置 REM

通过 JavaScript 动态设置 REM 单位通常用于响应式设计，确保页面在不同设备上缩放比例一致。

// 获取根元素
const root = document.documentElement;

// 设置根元素的字体大小
function setRemUnit() {
  // 获取视口宽度（可根据需求调整计算方式）
  const viewportWidth = window.innerWidth;
  // 基于视口宽度计算 REM 值（例如，设计稿宽度为 750px 时，1 REM = 10px）
  const remValue = viewportWidth / 75;
  root.style.fontSize = `${remValue}px`;
}

// 初始化时调用
setRemUnit();

// 监听窗口大小变化
window.addEventListener('resize', setRemUnit);

计算 REM 值的逻辑

设计稿通常以固定宽度（如 750px）为标准。
设定 1 REM = 设计稿宽度 / 75（或其他比例），便于直接换算设计稿中的像素值。
例如，设计稿中 100px 的元素可直接写为 10 REM（若 1 REM = 10px）。

动态调整 REM 的优化

// 限制 REM 的最大值和最小值，避免极端情况
function setRemUnit() {
  const viewportWidth = window.innerWidth;
  const minRem = 12; // 最小 REM 值
  const maxRem = 24; // 最大 REM 值
  let remValue = viewportWidth / 75;
  remValue = Math.max(minRem, Math.min(remValue, maxRem));
  root.style.fontSize = `${remValue}px`;
}

注意事项

避免在 CSS 中直接设置 <html> 的字体大小，否则会覆盖 JavaScript 的动态调整。
在移动端开发中，REM 单位常用于适配不同屏幕尺寸，结合 meta viewport 使用效果更佳。
使用 REM 时，CSS 中的其他相对单位（如 EM、百分比）可能会受到影响，需注意计算关系。

示例：完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>REM Demo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 10rem;
      height: 10rem;
      background: #f00;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <script>
    const root = document.documentElement;
    function setRemUnit() {
      const viewportWidth = window.innerWidth;
      const remValue = viewportWidth / 75;
      root.style.fontSize = `${remValue}px`;
    }
    setRemUnit();
    window.addEventListener('resize', setRemUnit);
  </script>
</body>
</html>

rem js实现