<p>动态设置 rem 基准需用 JS 计算：document.documentElement.style.fontSize = clientWidth / 375 * 16 + 'px'，配合 viewport 设置 width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no，并在 DOMContentLoaded 后执行。</p>
rem 基准值怎么动态设才不翻车
移动端用 rem 适配，核心是让根字体大小随设备宽度等比缩放。直接在 JS 里改 document.documentElement.style.fontSize 最稳妥，Less 本身不感知屏幕变化，硬写 @base-font-size: 16px 然后乘来乘去，上线就错位。
常见错误现象：1rem 在 iPhone 12 和 iPad 上一样大；横屏时文字突然撑破容器；微信内置浏览器里 rem 计算结果和 Chrome DevTools 不一致。
- 用 JS 动态计算并设置
font-size，例如以 375px 设计稿为基准，执行document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 16 + 'px' - Less 里只做静态换算：定义
@px2rem: 16px / 10（即 10px → 0.625rem），所有尺寸统一除以 10 写成10px→1rem，避免手算出错 - 别在 Less 里调用
media查询去改@base-font-size—— 编译后就是死值，起不到响应作用
Less 里的 px 转 rem 必须封装函数
手动把每个 px 除以 16 再加 rem 单位，不仅累，还容易漏改、错小数位。Less 提供 unit() 和除法运算，能自动完成转换，但要注意单位处理逻辑。
使用场景：设计稿标注是 24px 字号、12px 边距、48px 高度，全部要转成 rem。
立即学习“前端免费学习笔记（深入）”；
- 定义转换函数：
.px2rem(@px) { font-size: unit(@px / 16, rem); }（假设基准是 16px） - 调用时写
.px2rem(24)→ 输出font-size: 1.5rem；注意@px必须带单位（如24px），否则 Less 报Operation on an invalid type - 更健壮的写法是加类型判断：
.px2rem(@px) when (isnumber(@px)) { ... }，避免传入无单位数字时静默失败
viewport 设置和 rem 基准必须对齐
如果 viewport 里写了 initial-scale=1 但没禁用缩放，或者用了 width=device-width 却忽略 iOS 的「双倍像素」问题，JS 算出来的 clientWidth 就不是真实逻辑像素，rem 就会偏大或偏小。
典型错误：viewport 写成 width=375（固定死），导致大屏手机显示区域被压缩；或者忘了加 maximum-scale=1，用户双指一捏，rem 基准崩了。
-
viewport必须用width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no - JS 中取
clientWidth前，确保页面已触发一次 layout，比如放在DOMContentLoaded后，或用setTimeout微任务延迟执行 - iOS Safari 下，
clientWidth可能返回缩放后的值，建议加一层校验：if (window.devicePixelRatio > 1) { width = width / window.devicePixelRatio; }
不同设备 dpr 下的 1px 边框怎么用 Less 处理
高清屏上 1px 实际渲染是 2 物理像素，看起来粗。想用 rem 模拟真正的 1 物理像素边框，得结合 dpr 做条件缩放，但 Less 编译期无法获取运行时 dpr，所以不能全靠它。
可行路径只有两个：CSS @supports 配合伪元素缩放，或 JS 注入对应类名再用 Less 写多套规则。
- 推荐方案：JS 检测
window.devicePixelRatio，给html加类如data-dpr="2"，Less 里写[data-dpr="2"] .border-1px { transform: scaleY(0.5); } - 别用
calc(1px / @dpr)这种写法 —— Less 里@dpr是编译期变量，不是运行时值，结果永远是calc(1px / 1) - 如果坚持纯 CSS 方案，用
@supports (-webkit-transform: scale(0.5))包裹伪元素 +transform: scale(0.5)，但需额外处理圆角和 border-radius 兼容性
实际项目里最常被忽略的是：JS 设置 fontSize 的时机和 viewport 的完整性。少一个 maximum-scale=1，用户缩放后整个 rem 体系就失效；JS 执行太早，clientWidth 拿到的是 0，根字体变成 0px，所有内容消失。这些点不卡死，后面写多少 Less 函数都没用。
