关键不是用了rem，而是通过JS动态设置html的font-size使1rem随屏幕宽度线性变化；需以设计稿宽度（如375px）为基准，按clientWidth/designWidth比例计算根字号，并配合正确viewport配置实现等比缩放。
移动端 H5 用 rem 实现视口适配，关键不是“用了 rem”，而是通过 JS 动态控制 html 的 font-size，让 1rem 对应的像素值随屏幕宽度线性变化。设计稿定宽（如 375px 或 750px）后，所有尺寸按比例缩放，UI 才能等比还原。
核心原理：rem 本身不响应，靠 JS 驱动根字号
rem 是纯相对单位，只认 html 元素当前的 font-size 值。浏览器默认 16px 且固定不变，所以必须用 JS 主动设置——比如设计稿基于 375px 宽，约定此时 1rem = 100px（即 html{font-size:100px}），那在 414px 宽的 iPhone X 上，就该设为 100 × (414 / 375) ≈ 110.4px。
- 用
document.documentElement.clientWidth获取真实可视区域宽度（比window.innerWidth更准，排除滚动条干扰） - 公式统一为：
fontSize = baseSize × (clientWidth / designWidth) - 推荐加
Math.min(..., 2)或下限限制，防止小屏缩到 1px 以下导致元素闪烁或消失
基础 JS 实现（轻量、无依赖）
把这段脚本放在 中尽早执行：
(function () {
function setRootFontSize() {
const docEl = document.documentElement;
const clientWidth = docEl.clientWidth;
if (!clientWidth) return;
<pre class="brush:php;toolbar:false;">const designWidth = 375; // 以 375px 设计稿为基准
const baseSize = 100; // 期望 1rem = 100px（即 375px 屏幕下 html font-size = 100px）
const fontSize = baseSize * (clientWidth / designWidth);
docEl.style.fontSize = fontSize + 'px';}
setRootFontSize(); window.addEventListener('resize', setRootFontSize); window.addEventListener('orientationchange', setRootFontSize); })();
- 监听
resize和orientationchange，覆盖横竖屏切换场景 - 避免在
DOMContentLoaded后才执行，防止闪屏（首屏渲染前就要设好） - 若项目用 Vue/React，可封装为初始化函数，在挂载前调用
CSS 使用与开发提效技巧
JS 控制了根字号，CSS 就可放心用 rem 写尺寸。但手动换算 px→rem 易错，建议构建时自动转换：
- PostCSS 配置
postcss-pxtorem插件，开发写16px，构建输出0.16rem（按 1rem = 100px 换算） - 字体大小建议用 rem，但行高、阴影、border 等非布局属性可酌情保留 px，避免过度缩放失真
- 微信内需额外处理用户「大字体」设置：用
WeixinJSBridge监听并重设根字号，或 CSS 加text-size-adjust: 100%禁用强制缩放
必须配合的 viewport 设置
rem 适配失效的常见原因是 viewport 配置错误。务必在 中声明：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
width=device-width让视口宽度匹配设备逻辑像素（不是物理像素） - 禁用
user-scalable防止双击放大破坏等比关系（如需缩放，改用 pinch-zoom + transform） - 避免写
initial-scale=1却漏掉width=device-width，否则某些安卓机可能无视
