px是绝对单位，固定大小；em相对父元素且会嵌套叠加；rem基于根元素字体，利于统一控制；vw和vh分别相对于视口宽高的1%，适合响应式设计。
在CSS中，字体大小的单位有多种，常用的包括 px、em、rem、vw 和 vh。它们各自有不同的计算方式和适用场景，理解这些区别有助于更灵活地控制页面布局与响应式设计。
px（像素）
px 是绝对单位，表示屏幕上的一个物理像素点。设置字体为 16px 就是固定为 16 像素大小。
特点：
- 大小固定，不随父元素或页面缩放变化
- 简单直观，适合需要精确控制的场景
- 不利于可访问性，用户无法通过浏览器设置调整这类文字大小
em（相对单位，基于父元素）
em 是相对于当前元素或其父元素的字体大小。如果父元素字体是 16px，那么 1em = 16px。
立即学习“前端免费学习笔记（深入）”；
注意：em 会继承并叠加，容易造成层级嵌套时的计算复杂。
例如：
- 父元素 font-size: 16px
- 子元素 font-size: 1.5em → 实际为 24px（16 × 1.5）
- 孙子元素若也设 1.5em，则基于子元素的 24px 计算 → 36px
rem（根 em，基于根元素）
rem 相对于根元素（html 元素）的字体大小。默认情况下 html 的 font-size 是 16px，所以 1rem = 16px。
优势：
- 不受父级字体影响，避免 em 的层层放大问题
- 便于统一控制整个页面的字体比例
- 常用于响应式设计中配合 html 根字体调整
比如设置 html { font-size: 10px; }，则 1rem = 10px，2rem = 20px。
vw（视口宽度单位）
vw 表示视口宽度的 1%。如果屏幕宽度是 1000px，那么 1vw = 10px。
适用于根据屏幕宽度动态调整字体大小。
例子：
- font-size: 5vw → 字体大小为视口宽度的 5%
- 在移动端窄屏下自动变小，宽屏下变大，实现流体效果
vh（视口高度单位）
vh 表示视口高度的 1%。如果屏幕高度是 800px，1vh = 8px。
虽然也可用于字体，但更多用于布局高度控制。用于字体时可以让文字在垂直空间中自适应。
注意：部分移动浏览器对 vh 的解析存在兼容性问题（如Safari的工具栏会影响实际高度）。
基本上就这些。选择哪个单位取决于你的需求：要固定用 px，要可扩展用 rem，要做响应式 fluid 效果可以结合 vw，而 em 适合局部相对调整。合理搭配使用效果更好。
