rem能避免系统大字体破坏布局，因其基于根元素font-size且随系统设置自然缩放；关键要让html font-size响应系统设置，禁用px硬编码和JS覆盖，媒体查询不用rem，慎用rem设边框/圆角，避免与px混用及第三方库冲突。
为什么用 rem 能避免系统大字体破坏布局
因为 rem 基于根元素（html）的字体大小，而系统大字体设置会直接放大 html 的 font-size，只要你不手动覆盖它，整个基于 rem 的缩放就是“有感知”的——该变大的地方变大，该留白的地方留白，阅读体验反而更自然。反过来，px 是绝对单位，系统强制放大时浏览器只能粗暴地“拉伸像素”，导致按钮错位、文字溢出、间距崩坏。
关键点在于：不是 rem 本身防大字体，而是你得让 html 的 font-size 对系统设置保持响应。
如何让 html 的 font-size 适配系统字体设置
不能写死 html { font-size: 16px }，也不能用 JS 硬算设备像素比。最稳妥的做法是依赖浏览器原生行为：
- 默认不设
html字体大小，让其继承系统设置（iOS/Android 都支持） - 在 CSS 开头加
html { font-size: 100% }，确保不被其他样式意外重置 - 如需基准换算（比如 1rem = 10px），用
html { font-size: 62.5% }—— 因为默认是 16px，62.5% 就是 10px，方便后续用小数（如1.4rem= 14px） - 避免用 JS 动态设置
document.documentElement.style.fontSize，它会覆盖系统字体偏好，反而破坏可访问性
rem 在媒体查询和实际组件中怎么用才不翻车
媒体查询里的 min-width 等条件值仍用 px 或 em，不要用 rem —— 因为媒体查询的计算发生在根字体大小确定前，用 rem 会导致断点失效或错乱。
立即学习“前端免费学习笔记（深入）”；
组件内尺寸统一用 rem，但注意这些细节：
- 边框（
border）慎用rem，0.1rem 在小屏上可能不到 1px，渲染模糊；建议固定用1px或0.5px - 圆角（
border-radius）可用rem，但别设太小（如0.1rem），否则高倍屏下不可见 - 行高（
line-height）推荐无单位数值（如1.5），它相对于当前字体大小，天然适配缩放 - 图标字体或 SVG 图标，尺寸用
rem，但确保其容器不依赖固定px宽高
哪些情况 rem 反而会让问题更糟
rem 不是银弹。以下场景容易踩坑：
- 混合使用
px和rem布局（比如父容器用px宽度，子元素用rem内边距），缩放后比例失衡，内容被裁切 - 第三方 UI 库（如某些 Vue 组件库）内部写死
px，没提供rem开关，强行覆盖可能破坏样式隔离 - 用
vw/vh做全屏背景或遮罩时，和rem混用易造成滚动条抖动，尤其在 iOS Safari 中 - 未测试「超大字体」模式（如 iOS 设置 > 辅助功能 > 显示与文字大小 > 更大字体），只测了「较大」档位，漏掉极端 case
真正难的不是换单位，而是整条链路——从根字体继承、媒体查询边界、第三方依赖、到辅助功能实机验证——都得串起来看。少一个环节，用户开个大字体就卡在登录按钮点不了。
