当前位置：首页 > JavaScript

rem js实现

2026-01-31 16:49:31JavaScript

JavaScript 实现 REM 布局

REM（Root EM）是一种基于根元素字体大小的相对单位，常用于移动端适配。以下是实现 REM 布局的详细方法：

设置根元素字体大小

通过 JavaScript 动态计算并设置根元素（<html>）的 font-size，通常以屏幕宽度为基准：

rem js实现

function setRemUnit() {
  const docEl = document.documentElement;
  const width = docEl.clientWidth;
  const rem = width / 10; // 将屏幕宽度分为10份，1rem = 屏幕宽度的1/10
  docEl.style.fontSize = rem + 'px';
}

// 初始化执行
setRemUnit();
// 监听窗口变化
window.addEventListener('resize', setRemUnit);

CSS 中使用 REM 单位

在 CSS 中直接使用 REM 单位，所有尺寸将自动适配屏幕宽度：

rem js实现

.box {
  width: 2rem;  /* 实际宽度为屏幕宽度的2/10 */
  font-size: 0.3rem; /* 字体大小为屏幕宽度的0.3/10 */
}

结合媒体查询（可选）

为防止极端尺寸下布局异常，可添加媒体查询限制根字体大小的范围：

@media screen and (max-width: 320px) {
  html { font-size: 32px; }
}
@media screen and (min-width: 750px) {
  html { font-size: 75px; }
}

设计稿尺寸转换

若设计稿基于 750px 宽度，可通过工具（如 PostCSS 插件）将像素值自动转换为 REM。手动计算规则为： $$ rem = \frac{设计稿像素值}{基准值（如75）} $$ 例如设计稿中 150px 的元素对应 CSS 中 2rem（150÷75）。

注意事项

避免在非尺寸属性（如颜色、定位）中使用 REM。
安卓设备可能对小于 12px 的字体渲染异常，需单独处理。
禁用用户缩放可增强一致性：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">