em单位按父元素“计算后”的font-size值计算，而非css声明值；例如父元素font-size: 1.2rem且html为16px，则1em=19.2px，需查devtools的computed面板确认。
em单位怎么算：不是看父元素写了什么，而是看它最终渲染出多大
很多人写 padding: 1em 时以为是在继承父元素的 font-size: 14px 声明，其实不是。浏览器取的是父元素「计算后」的字号值——比如父元素设了 font-size: 1.2rem，而根 html 是 16px，那它实际是 19.2px，子元素的 1em 就等于 19.2px，不是 14px。
这意味着：你不能只扫一眼父元素 CSS 就心算出 em 值，得打开 DevTools 看「Computed」面板里的 font-size 才准。
- 如果父元素
font-size是0或inherit且上游没定义，1em会退到浏览器默认（通常是16px），但行为不可控 - 嵌套三层以上还用 em 控制尺寸，很容易出现「本想缩 20%，结果缩了 35%」——因为每层都在用上一层的计算值做基准
- 按钮内含 SVG 图标时，
width: 1em; height: 1em能自然对齐文字基线，比固定16px更鲁棒
按钮用em设置哪些属性才真正“随字体缩放”
不是所有尺寸都适合用 em。核心原则是：只对「视觉比例需跟随文本变化」的属性用 em，比如内边距、圆角、最小宽度；而字体大小本身一般不用 em 再套一层（除非你明确要相对父字号缩放）。
典型安全写法：
button {
font-size: 16px;
padding: 0.5em 1em; /* ≈ 8px 16px，放大字体时自动等比撑开 */
border-radius: 0.25em; /* ≈ 4px，保持圆角与文字大小协调 */
min-width: 6em; /* ≈ 96px，按钮不会因文字变大而挤压变形 */
}
-
line-height推荐用无单位数值（如1.4），用1.4em会和父元素行高叠加，导致意外增高 - 避免对
font-size本身用 em，例如font-size: 0.875em—— 这会让按钮字号依赖父级，破坏独立性 - 如果按钮被塞进一个
font-size: 12px的卡片里，它的1em就按12px算，可能太小；此时更适合用 rem 或显式 px
为什么按钮在移动端突然变小？常见 em 失效场景
用户缩放页面、系统开启「大字体模式」或 CSS 中某层祖先意外重置了 font-size，都会让按钮的 em 计算基准突变——看起来是按钮变小了，其实是父级字号被压到了 12px 甚至 10px。
- 微信内置浏览器常强制重设
body字号，导致深层按钮 em 值骤降 - Vue/React 组件中，父组件传入的
style={{ fontSize: '0.875em' }}会让子按钮的 em 基准变成该计算值，而非设计稿预期 - 使用了 Normalize.css 或重置样式表，但漏掉了
button { font-size: 1em; }，按钮可能继承html的16px，也可能被重置为更小值 - 媒体查询里改了某容器的
font-size，但没同步检查其内部按钮的 em 表现，容易漏测
要不要在按钮上混用 em 和 rem？
可以，但必须清楚各自负责什么：用 rem 控制整体基准（比如统一调 html { font-size: 10px; } 让 1rem = 10px），再用 em 做局部微调（比如按钮内图标始终是文字高度的 80%）。混用本身不危险，危险的是没分清责任边界。
- 全局缩放需求（如适配 iPad 和小屏手机）优先用 rem 调
html字号，别靠层层 em 堆 - 按钮内 icon、loading 圆点、分割线粗细这些「附属视觉元素」，用 em 跟文字联动最自然
- 一旦发现按钮在某个嵌套层级下尺寸异常，第一反应不是改按钮 CSS，而是查它最近一个设置了
font-size的父元素的「Computed font-size」值
真正难的不是写对一行 padding: 0.75em，而是确保从 html 到按钮父容器这条链路上，每一步的字号都可预期、可调试、不被第三方样式劫持。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
