日常开发优先用 rem，内联样式或组件原子化控制可用 px，em 容易嵌套失控，新手慎用。
font-size 用 px 还是 rem？看场景别硬套
直接说结论：日常开发优先用 rem，内联样式或组件原子化控制可用 px，em 容易嵌套失控，新手慎用。
用 rem 是因为它是相对于根元素 html 字体大小的单位，缩放、适配、主题切换都靠它统一调控；但如果你在写一个独立的微组件（比如弹窗里的提示文字），又不想受全局字体影响，用 px 反而更稳。
-
px：绝对像素值，不随缩放/系统设置变化，适合图标尺寸、边框、固定字号文本（如按钮上“确定”） -
rem：依赖html { font-size: 16px; }，改这一处就能批量调全站文字大小，但注意 Safari 旧版本对动态改font-size的响应有延迟 -
em：相对于父元素字体大小，嵌套三层后容易算错——比如父14px→ 子0.8em（11.2px）→ 孙再0.8em就变成 ~9px，很难维护
CSS font-size 不生效？先查这三件事
最常见的不是写错了，而是被更高优先级规则覆盖、继承被截断、或者元素本身不支持文本渲染。
- 检查是否被
!important或更具体的 CSS 选择器覆盖（比如.btn .text比.text优先级高） - 确认元素是否为替换元素：
input、textarea、button默认有 UA 样式，必须显式重置font-size才生效 - 父级设置了
font-size: 0;（常见于清除 inline-block 间隙），子元素若用em或%就会变成 0 —— 改成rem或直接设px
HTML 内联 style 中 font-size 写法要带单位
写成 style="font-size: 14" 是无效的，浏览器会直接忽略整条声明。CSS 属性值只要不是无单位数字（如 z-index、opacity），就必须带单位。
立即学习“前端免费学习笔记（深入）”；
正确写法只有这些：
style="font-size: 14px;"style="font-size: 1.2rem;"-
style="font-size: 120%;"（相对于父元素）
错误示例：style="font-size: 14"、style="font-size: 1.2"、style="font-size: medium"（虽然合法但不可控，不推荐）
移动端 font-size 适配别只靠 media query
单纯用 @media (max-width: 768px) { html { font-size: 14px; } } 能工作，但无法应对 iPad 横竖屏切换、Android 分屏、Zoom 缩放等真实场景。
更靠谱的做法是结合 JS 动态设置根字号：
document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px';
前提是设计稿按 375px 宽（iPhone SE）基准，16px 对应 1rem；但要注意：iOS Safari 在横屏时 window.innerWidth 返回的是竖屏宽度，需监听 orientationchange 或改用 screen.width 做兜底。
真正难的不是怎么设，而是所有用到 rem 的地方（包括 padding、height）都要同步考虑这个缩放逻辑 —— 字体只是冰山一角。
