rem 适配方案
rem 适配方案的核心是一段 JS：按设计稿宽度（常见 375）与屏幕宽度比例修改根字号，之后页面所有尺寸按设计稿 px / 37.5 写 rem，整页随屏幕等比缩放。
优点是还原度极高、各种手机一致；缺点是“等比缩放”而非“响应式”——大屏上字号会过大。可加 max-width 限制有效缩放范围。
- 方案：屏幕宽 / 设计稿宽 × 基准字号 = 根字号
- 优点：设计稿 1:1 还原，各机型一致
- 缺点：大屏等比放大，文字可能过大；需限制 body 最大宽度
JS
// rem 适配：设计稿 375px，基准 100（1rem = 100px，换算最简单） (function () { function setRem() { var doc = document.documentElement; var width = doc.clientWidth; // 视口 CSS 像素 var rem = width / 3.75; // 375 设计稿下 rem = 100 doc.style.fontSize = rem + 'px'; } setRem(); window.addEventListener('resize', setRem); })(); // 业务写法：设计稿 32px 字号 -> 0.32rem // document.querySelector('.title').style.fontSize = '0.32rem';
本节要点rem 适配 = 按比例改根字号 + 全站用 rem；还原度高，但本质是缩放，大屏体验要单独调。
