移动端文字适配关键在单位选择与根字号动态控制：需禁用text-size-adjust、用rem配合视口缩放，PC端推荐rem继承用户设置，clamp()可兼顾双端但需设上下限。
直接用 font-size 是基础，但单位选错就白调
手机端和PC端文字大小“看起来一样”，实际渲染可能差一倍——根本原因不在标签，而在单位选择和根元素基准。比如写 font-size: 16px，在PC上清晰，在iPhone上可能被Safari自动放大（尤其横屏时），导致布局错位；而写 font-size: 1rem，若没设好 html 的 font-size，手机端反而更小。
- 移动端默认会触发
text-size-adjust，iOS Safari 尤其激进，哪怕你写了16px，它也可能偷偷放大到20px以保可读性 - PC端基本不干预，
px值大多如实渲染，但高DPI屏（如MacBook）下若没配device-pixel-ratio查询，文字可能发虚 -
rem是跨端首选，但必须配合根字号动态设置：PC端可固定为16px，移动端得按视口宽度缩放（比如375px宽度对应html { font-size: 18.75px; }）
移动端必须加的两行“保命代码”
不加这两句，再精细的 font-size 设置都可能被浏览器覆盖：
- 在
里加 meta： - 在 CSS 中强制关掉自动调整：
html, body { -webkit-text-size-adjust: none; text-size-adjust: none; } - 注意：
text-size-adjust: none在部分安卓浏览器中支持有限，需搭配 JS 动态重设根字号兜底
PC端用 px 看似省事，但无障碍访问会翻车
用户在系统设置里把浏览器默认字号调成“大号”或启用了“强制字体缩放”，px 文字就完全不响应——对视障用户极不友好。而 rem 或 % 单位能继承用户偏好。
- 推荐 PC 端也统一用
rem，根字号设为html { font-size: 100%; }（即继承浏览器默认，通常是16px） - 避免全站写死
html { font-size: 16px; }，这会绕过用户设置，WCAG 2.1 明确不推荐 - 如果真要用
px，至少给关键文本（如按钮、表单标签）留出min-font-size: 1rem的弹性底线
用 clamp() 一键适配双端，但别滥用
clamp(最小值, 理想值, 最大值) 是目前最干净的双端字体方案，比如：font-size: clamp(14px, 2.5vw, 18px);。它让小屏不糊、大屏不飘、中屏刚好。
立即学习“前端免费学习笔记（深入）”；
- 移动端
2.5vw在 375px 宽度下 ≈ 9.4px → 太小，所以必须设14px为下限 - PC端
2.5vw在 1920px 下 ≈ 48px → 太大，所以用18px封顶 - 注意：IE 不支持
clamp()，若还需兼容，得用 JS +rem动态计算 fallback
真正难的不是调大调小，而是让文字在 iPhone 横屏、Windows 高缩放、Mac 深色模式、读屏软件播报等所有组合下，既不溢出容器，也不小到看不见——单位只是工具，关键是理解谁在控制最终像素值。
