CSS 单位全解析：从 px 到 rem/em/vh/vw，零基础学会尺寸换算与响应式设计

一、像素（px）：最基础的固定单位

定义：
px是固定像素单位，直接对应屏幕上的物理像素点。无论在什么设备上，1px 的物理大小可能不同（如手机屏幕的 1px 比电脑屏幕小），但在 CSS 中它是最基本的度量单位。

特点：

• 固定大小，不会随其他元素变化
• 兼容性最好，所有浏览器都支持
• 适合需要精确控制的元素（如边框、图标大小）

应用场景：

css

div {
  width: 200px;       /* 固定宽度200像素 */
  height: 150px;      /* 固定高度150像素 */
  border: 1px solid #333; /* 1像素边框 */
  font-size: 16px;    /* 文字大小16像素 */
}

二、百分比（%）：相对于父元素的单位

定义：
%表示百分比，永远相对于父元素的尺寸计算。具体规则如下：

1. 宽度 / 高度：相对于父元素的宽 / 高

   css

   .parent {
     width: 400px;     /* 父元素宽度400px */
   }
   .child {
     width: 50%;       /* 子元素宽度 = 400px * 50% = 200px */
   }
   

2. 内边距 / 外边距：相对于父元素的宽度（即使是垂直方向）

   css

   .parent {
     width: 300px;     /* 父元素宽度300px */
   }
   .child {
     padding-top: 10%; /* 上边距 = 300px * 10% = 30px */
   }
   

3. 字体大小：相对于父元素的字体大小

   css

   body {
     font-size: 16px;  /* 父元素字体16px */
   }
   p {
     font-size: 125%;  /* 段落字体 = 16px * 125% = 20px */
   }
   

转换公式：

plaintext

目标值(px) = 父元素尺寸(px) × 百分比值

三、em：相对于父元素字体的单位

定义：
em是相对单位，1em 等于父元素的字体大小。如果没有明确设置父元素字体，则继承浏览器默认字体大小（通常是 16px）。

特点：

• 常用于字体大小和间距设置
• 在嵌套元素中可能导致级联放大（需注意）

应用场景：

css

body {
  font-size: 16px;    /* 基础字体16px */
}
h1 {
  font-size: 2em;     /* 2em = 16px * 2 = 32px */
}
p {
  font-size: 0.875em; /* 0.875em = 16px * 0.875 = 14px */
}

注意嵌套元素的级联问题：

css

.parent {
  font-size: 20px;    /* 父元素字体20px */
}
.child {
  font-size: 1.5em;   /* 子元素字体 = 20px * 1.5 = 30px */
}
.grandchild {
  font-size: 0.8em;   /* 孙元素字体 = 30px * 0.8 = 24px */
}

转换公式：

plaintext

目标值(px) = 父元素字体大小(px) × em值

四、rem：相对于根元素字体的单位

定义：
rem是 “root em” 的缩写，永远相对于根元素（html）的字体大小。无论元素嵌套多深，1rem 的大小始终固定。

特点：

• 避免了 em 的级联问题，计算更简单
• 常用于响应式设计（通过媒体查询改变根字体）

应用场景：

css

html {
  font-size: 16px;    /* 根字体16px */
}
h1 {
  font-size: 2rem;    /* 2rem = 16px * 2 = 32px */
}
p {
  font-size: 0.875rem; /* 0.875rem = 16px * 0.875 = 14px */
}

响应式设计技巧：
通过媒体查询改变根字体大小，实现全局缩放：

css

html {
  font-size: 16px;    /* 默认根字体 */
}
@media (max-width: 768px) {
  html {
    font-size: 14px;  /* 小屏幕下根字体变小 */
  }
}

转换公式：

plaintext

目标值(px) = 根元素字体大小(px) × rem值

五、视口单位（vw/vh）：相对于浏览器窗口的单位

定义：

• vw：视口宽度的 1%（Viewport Width）
• vh：视口高度的 1%（Viewport Height）
• vmin：取 vw 和 vh 中的最小值
• vmax：取 vw 和 vh 中的最大值

示例：

css

div {
  width: 50vw;        /* 宽度 = 视口宽度 × 50% */
  height: 25vh;       /* 高度 = 视口高度 × 25% */
}

特点：

• 完全基于浏览器窗口大小，适合全屏布局
• 常用于标题、英雄区等需要随窗口缩放的元素

转换公式：

plaintext

目标值(px) = 视口宽度(px) × vw值  
目标值(px) = 视口高度(px) × vh值

示例：
若浏览器窗口宽度为 1200px，则：

css

div {
  width: 10vw;        /* 10vw = 1200px × 10% = 120px */
}

六、单位转换实战指南

1. 百分比与 px 互转

css

/* 已知父元素宽度400px，子元素宽度50% */
子元素宽度(px) = 400px × 50% = 200px

/* 已知子元素宽度150px，父元素宽度300px */
子元素宽度(%) = (150px ÷ 300px) × 100% = 50%

2. em/rem 与 px 互转

css

/* 已知根字体16px，元素大小2rem */
元素大小(px) = 16px × 2 = 32px

/* 已知元素大小24px，根字体16px */
元素大小(rem) = 24px ÷ 16px = 1.5rem

3. vw/vh 与 px 互转

css

/* 已知视口宽度1000px，元素宽度15vw */
元素宽度(px) = 1000px × 15% = 150px

/* 已知元素高度80px，视口高度600px */
元素高度(vh) = (80px ÷ 600px) × 100vh ≈ 13.33vh

七、单位选择最佳实践

单位	适用场景
px	固定尺寸元素（如边框、图标）、不需要响应式的元素
%	容器内的自适应布局（如网格、侧边栏）、图片宽高比保持
em	文本相关的间距（如行高、段落间距）、需要随字体缩放的元素
rem	全局响应式布局（通过根字体统一控制）、按钮 / 输入框等组件尺寸
vw/vh	全屏元素（如导航栏、英雄区）、需要与视口相关的元素

八、常见问题解答

1. 为什么我的百分比高度不生效？
   答：百分比高度需要父元素有明确的高度值。如果父元素高度是 auto，则百分比高度无效。

2. em 和 rem 的区别是什么？
   答：em 相对于父元素字体，rem 相对于根元素字体。rem 更适合统一管理全局尺寸。

3. vw/vh 会导致滚动条问题吗？
   答：是的。如果使用 100vh 可能会导致页面高度超过视口，出现滚动条。可以使用height: 100dvh（动态视口高度）解决。

4. 如何在项目中统一管理单位？
   答：推荐使用 rem 作为主要单位，通过设置根字体大小（如html { font-size: 10px; }）简化计算（1rem = 10px）。

通过掌握这些单位的特性和转换方法，你可以轻松实现从固定布局到响应式设计的跨越！建议在实际项目中多尝试不同单位的组合，找到最适合自己的方案