rem是相对于根元素html字体大小的单位，通过动态调整html的font-size可实现文字、间距等的等比缩放，从而达成可控的多端适配；需配合JS在DOM加载后按视口宽度动态计算并设置基准值，避免resize高频触发与横屏误差。
rem 是什么，为什么用它做多端文字适配
rem 是相对于根元素 html 的字体大小的单位。只要动态改 html 的 font-size，所有用 rem 定义的文字、间距、宽高等都会等比缩放——这正是它适合响应式/多端适配的核心原因。
注意：它不是“自动适配”，而是“可控缩放”。你得自己算好基准值，并在合适时机更新 html 的 font-size，否则白搭。
怎么设置 html 的 font-size 才能兼顾 PC、平板、手机
主流做法是按屏幕宽度比例缩放，常见两种策略：
- 线性缩放（如 375px → 16px，750px → 32px）：简单但到大屏后字体会过大，PC 端常需加断点限制上限
- 分段缩放（媒体查询 + JS 动态计算）：更稳妥，比如：
@media (max-width: 375px) { html { font-size: 14px; } }@media (min-width: 376px) and (max-width: 768px) { html { font-size: 16px; } }
再配合 JS 在页面加载和 resize 时补上更细粒度调整
推荐用 JS 动态设置：取设备物理宽度（window.screen.width）或布局视口宽度（document.documentElement.clientWidth），除以设计稿基准宽度（如 375），乘以基准字号（如 16），得到实时 font-size 值。
立即学习“前端免费学习笔记（深入）”；
JS 设置 rem 基准时容易踩的坑
常见错误不是代码写错，而是时机和精度失控：
- 没等 DOM 加载完就执行，导致
document.documentElement拿不到正确尺寸 → 放在DOMContentLoaded或resize回调里 - 用
window.innerWidth而非document.documentElement.clientWidth：前者含滚动条，iOS Safari 下误差明显 - 没节流 resize 事件：快速横竖屏切换时高频触发，影响性能 → 加个
setTimeout防抖，300ms 内只执行最后一次 - 忽略 iPhone 横屏状态：横屏时
clientWidth可能反超竖屏，建议统一按竖屏逻辑处理，或加orientationchange单独监听
字体大小用 rem 写多少才合理
别直接套用设计稿像素值。例如设计稿是 14px，别写 font-size: 14rem——那是 14 倍根字号，巨大无比。
正确换算公式：rem 值 = 设计稿 px 值 ÷ 根字号基准值。若你设了 html { font-size: 16px; }，那 14px 就写 font-size: 0.875rem（14 ÷ 16）。
实际开发中，建议提前定义常用字号变量（如 --fs-xs: 0.75rem;），避免满屏小数。同时注意：部分安卓 WebView 对小于 12px 的文字会强制放大，这时得用 -webkit-text-size-adjust: none（慎用，可能影响可访问性）。
最麻烦的其实是按钮内文字和行高联动——line-height 也得用 rem，且要确保视觉节奏不因缩放突变。这点常被忽略，直到测试时发现某机型按钮文字贴顶或留白过大。
