组件内间距用 em 更合理，前提是组件显式声明 font-size；全局对齐尺寸用 rem；border 和 icon-font 用 em 可随字号微调；box-shadow 和 border-radius 必须用 px；line-height 必须用无单位数值。
组件内部间距用 em 还是 rem？
组件内 padding、margin 用 em 更合理，前提是组件自身显式声明了 font-size。因为 em 在这些属性上参照的是**当前元素自身的字号**，不是父级——按钮放大时，内边距自然等比撑开，视觉节奏一致。
- 错误写法：
.btn { padding: 0.75em; }但没设font-size，结果继承自 body 的 16px，后续改主题字体时所有按钮内边距全乱 - 正确写法：
.btn { font-size: 14px; padding: 0.75em; }或用rem配合根字号统一控制 - 别在卡片里混用：
padding: 1rem+font-size: 1.2em→ 行高/间距不再随文字缩放，文字变大后留白突兀
跨组件复用的字体和间距必须用 rem
标题、段落、列表项、栅格间距这些需要全局对齐的尺寸，一律走 rem。它只认 html 的 font-size，改一处，整站响应式缩放就生效，调试时 computed 值能直接反推根字号是否被覆盖。
- 必须显式写：
html { font-size: 16px; }，别依赖浏览器默认值，iOS Safari 会重置 - 移动端适配推荐：
html { font-size: clamp(14px, 2.5vw, 18px); }，小屏保可读，大屏不溢出 - JS 动态设置时，
document.documentElement.style.fontSize要在DOMContentLoaded后执行，否则首屏渲染取不到视口宽
border 和 icon-font 尺寸该用 em 还是 px？
border-width 和 icon-font 图标尺寸用 em 是少数真正合理的场景：它们需要与当前文字基线对齐、粗细随字号微调。但注意——em 在 border-width 上参照的是当前元素 font-size，不是父级；而 px 在高清屏上需配合 transform: scale() 修复模糊，基础值仍得是 px。
- 图标按钮边框：
border: 0.0625em solid #ccc（即 1px @16px），文字放大时边框同步变细，保持精致感 - icon-font：
font-size: 1.2em可自然贴合文本基线，比固定24px更灵活 - 绝对不可替代的
px场景：box-shadow: 0 2px 8px、border-radius: 4px——这些要像素级精准，不能随缩放抖动
混用单位时最隐蔽的坑
不是数值算错，而是参照物打架。比如 font-size: 1.5rem + line-height: 1.5（无单位）是安全的；但若写成 line-height: 1.5em，就会二次乘以当前字号，行高翻倍。
- 行高必须用无单位数字，
line-height: 1.5才是真比例，line-height: 1.5em是陷阱 - 自定义属性
var(--base-font)不能参与rem计算，rem只认html最终计算值，不是变量名 - 媒体查询里改
html { font-size }时，别用硬切断点：@media (max-width: 768px) { html { font-size: 14px } }→ 横屏旋转时尺寸突变，用clamp()或 JS 防抖更平滑
真正难处理的从来不是单个单位怎么写，而是整个样式体系里所有单位是否共享同一套参照契约——一旦漏掉某处 font-size 声明，或某条 line-height 写错单位，整块区域的缩放逻辑就断掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
