CSS长度单位em、rem、vh、vw与px的区别是什么？
2026-03-18 13:57:57
em、rem、vh、vw与px的核心区别在于参照基准不同，导致元素尺寸的计算方式及响应特性存在差异。具体区别如下：
px（像素）
绝对单位：固定值，不随视口大小、父元素或根元素字体变化而改变。
参照基准：直接对应屏幕物理像素（或逻辑像素，取决于设备分辨率）。
适用场景：需要精确控制尺寸（如边框、图标）或非响应式布局时使用。
局限性：无法适应不同设备尺寸，可能导致在小屏幕上内容溢出或大屏幕上留白过多。
em
相对单位：基于当前元素的父元素字体大小计算。
计算方式：1em = 父元素字体大小（如父元素字体为16px，则1em = 16px）。
嵌套影响：若元素存在多层嵌套，em值会逐级继承和放大（如嵌套三层且每层字体放大1.2倍，最终尺寸为16px × 1.2³）。
适用场景：需要基于父元素字体比例缩放的场景（如按钮内边距随父字体调整）。
风险：嵌套过深可能导致尺寸计算失控，需谨慎管理继承链。
rem（root em）
相对单位：基于根元素（html）字体大小计算，避免嵌套影响。
计算方式：1rem = 根元素字体大小（默认通常为16px，可通过CSS修改）。
优势：统一参照基准，便于全局尺寸控制（如通过修改根字体实现整体缩放）。
适用场景：响应式布局、整体缩放或需要保持比例一致的模块（如栅格系统）。
实践建议：结合媒体查询调整根字体大小，实现适配不同设备的布局。
vh/vw（视口高度/宽度百分比）
相对单位：基于浏览器视口尺寸计算。
计算方式：1vh = 视口高度的1%，1vw = 视口宽度的1%（如视口宽800px，则1vw = 8px）。
动态调整：值随视口大小变化而实时更新（如旋转设备或调整浏览器窗口）。
适用场景：全屏布局、英雄区域（hero section）或需要按视口比例缩放的元素（如轮播图高度）。
注意事项：极端视口尺寸（如超宽屏或手机竖屏）可能导致内容可读性下降，需配合最小/最大值限制。
关键总结：
- px是静态的，而em、rem、vh、vw是动态的，其值随参照基准变化而调整。
- em依赖父元素字体，可能导致嵌套问题；rem依赖根字体，更易管理。
- vh/vw直接关联视口，适合全屏或视口相关布局，但需注意极端情况。
- 选择依据：根据布局需求（如是否需要响应视口、字体缩放或精确控制）和设计目标（如响应式、可访问性）决定单位。
示例场景：
- 按钮宽度：用px固定宽度（如200px）确保一致性，或用rem（如2rem）随根字体缩放。
- 全屏横幅：用vh设置高度（如100vh）填满视口，或用vw设置宽度（如50vw）占视口一半。
- 文本内边距：用em（如1em）随父字体调整，保持比例。
热门标签
