用 rem 实现字号自适应的核心是动态设置 html font-size，推荐 CSS 的 calc() 或 clamp() 方案，JS 方案需配合边界控制；须统一设计稿基准与换算规则，并响应式调整行高、字体栈等以保障可读性。
用 rem 实现字号自适应，核心是让根元素 html 的 font-size 随屏幕宽度动态变化，从而让所有以 rem 为单位的字体（及其他尺寸）等比缩放。关键不在“大屏小屏差异大”，而在于你是否建立了可控、平滑、符合阅读习惯的缩放逻辑。
用视口宽度动态设置 html font-size
最常用且可靠的方式是通过 JS 监听 resize 或使用 vw 单位直接在 CSS 中响应式设定：
- 纯 CSS 方案（推荐）：例如
html {font-size: calc(12px + 0.5vw); }，在 320px 宽度时约 13.6px，768px 时约 15.8px，1440px 时约 18.2px —— 增长平缓，避免小屏过小、大屏过大 - JS 动态方案（更精准）：按设计稿基准（如 375px）等比缩放：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 16 + 'px';，再配合resize和orientationchange事件更新
设计稿与 rem 换算要统一基准
前端 开发前必须明确一个“设计稿基准宽度”（如 375px 或 750px）和对应的根字号（如 16px）。所有标注尺寸按比例转为 rem：
- 若设计稿宽 375px、约定
html{font-size:16px}，则 16px 字体 =1rem，32px 图标 =2rem - 若实际在 750px 设计稿下标注 32px，仍希望按 375px 基准换算，就需先除以 2 再转 rem，避免字号翻倍
- 建议用 PostCSS 插件（如
postcss-pxtorem）自动转换，但务必配置好rootValue和mediaQuery开关
限制最小 / 最大字号，保障可读性
单纯等比缩放可能导致极端设备上文字过小（如手机横屏）或过大（如 4K 屏），需加边界控制：
立即学习 “ 前端免费学习笔记（深入）”；
- CSS 中用
@media或clamp()：例如html {font-size: clamp(14px, 2.5vw, 20px); }，确保字号始终在 14–20px 区间内弹性变化 - JS 方案中增加判断：
const size = Math.min(Math.max(clientWidth / 375 * 16, 14), 20); - 正文主字号建议不小于 14px（iOS 最小可读字号），标题最大不宜超过 36px，否则影响信息密度
字体家族与行高也要响应式微调
字号变了，字体渲染效果、行高、字间距也会变化，不能只调 font-size：
- 行高建议用无单位数值（如
line-height: 1.5;），它会随字号自动缩放；避免写死px或rem行高 - 中文字体在小屏下易糊，可对
<small></small>或副文本加text-rendering: optimizeLegibility; - 超大屏（≥1920px）可考虑切换更舒展的字体 栈，或略微增大
letter-spacing提升可读性
