【高频考点精讲】CSS单位全解析：px、em、rem、vw/vh、%这些单位到底什么时候用？

CSS单位全解析：px、em、rem、vw/vh、%这些单位到底什么时候用？

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

今天咱们来聊聊CSS中那些让人又爱又恨的单位。作为前端工程师，每天都要和这些单位打交道，但你真的了解它们吗？px、em、rem、vw/vh、%这些单位，用对了事半功倍，用错了可能就要加班调样式了。（全栈老李友情提示）

像素(px)：最基础也最"固执"

px是咱们最熟悉的老朋友了，1px就是屏幕上的一个物理像素点。它最大的特点就是"固执"——说1px就是1px，雷打不动。

/* 全栈老李示例代码 */
.button {
   
  width: 100px;  /* 固定宽度，不受其他因素影响 */
  height: 40px;
  border: 1px solid #333; /* 边框永远1像素 */
}

px最适合用在需要精确控制的场景：

• 边框宽度（border）
• 阴影（box-shadow）
• 需要固定尺寸的UI元素（比如图标）

但px有个致命缺点：它不考虑用户的实际需求。比如用户在浏览器设置了更大的字体大小，你的16px文字依然雷打不动，这对视力不好的用户很不友好。

相对单位em：像弹簧一样的单位

em是个相对单位，相对于当前元素的字体大小。如果当前元素没设置字体大小，就继承父元素的。

/* 全栈老李示例代码 */
.parent {
   
  font-size: 20px;
}

.child {
   
  font-size