核心是让html的font-size随屏幕宽度线性变化，通过JS动态计算fontSize=baseSize×(clientWidth/designWidth)并设为根字号，配合viewport声明与纯rem布局实现等比适配。
核心不是“用 rem”，而是让 html 的 font-size 随屏幕宽度线性变化，使 1rem 对应的像素值动态缩放，从而驱动整个页面等比还原设计稿。
明确设计基准与根字号映射关系
设计稿宽度（如 375px 或 750px）是缩放起点。需约定一个“基准根字号”：例如 750px 设计稿下设 1rem = 75px（即 html { font-size: 75px; }），这样所有标注尺寸可直接除以 75 换算为 rem（如 150px → 2rem）。这个 75 就是 postcss-pxtorem 的 rootValue，也必须和 JS 计算逻辑严格对齐。
用 JS 动态设置 html 字体大小
关键取值用 document.documentElement.clientWidth（排除滚动条干扰，比 window.innerWidth 更准）。计算公式统一为：
fontSize = baseSize × (clientWidth / designWidth)- baseSize 是基准根字号（如 75），designWidth 是设计稿宽度（如 750）
- 建议加安全限制，例如
Math.min(fontSize, 100)和Math.max(fontSize, 30)，避免小屏过小导致渲染异常
CSS 中统一使用 rem 定义尺寸
所有布局相关属性——width、height、padding、margin、font-size、border-radius——全部用 rem。不要混用 px，否则会破坏等比逻辑。可保留少量 px 用于 1px 边框（配合 transform: scaleY(0.5) 等 hack），但主体结构必须纯 rem。
立即学习“前端免费学习笔记（深入）”；
配套 viewport 必须正确声明
在 <head> 中加入：
其中 width=device-width 是关键，它让视口宽度等于设备物理宽度（CSS 像素），JS 才能拿到真实可用的 clientWidth。漏掉这句，clientWidth 可能返回 980 或其他固定值，适配彻底失效。
