css字体大小单位px em rem vw vh区别

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。

优势：

AGI-Eval评测社区

AI大模型评测社区

63

查看详情

• 不受父级字体影响，避免 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 适合局部相对调整。合理搭配使用效果更好。

以上就是css字体大小单位px em rem vw vh区别的详细内容，更多请关注php中文网其它相关文章！