CSS 中 px、%、vh、vw 这四种常用单位的区别

你想搞懂 CSS 中 px、%、vh、vw 这四种常用单位的区别、适用场景和使用技巧，核心是要分清「固定单位 vs 相对单位」，以及「相对谁来计算」------这是前端适配不同屏幕尺寸的基础，下面用「定义+示例+场景+对比」帮你彻底理清，所有示例都是可直接运行的纯原生 CSS/HTML 代码。

CSS 单位解析：px、%、vh、vw（纯原生版）

一、核心分类：固定单位 vs 相对单位

单位类型	包含单位	核心特点
固定单位	px	尺寸固定，不随屏幕/容器变化
相对单位	%、vh、vw	尺寸动态，随参考对象（容器/视口）变化

二、逐个解析（定义+示例+场景）

1. px（像素）------ 固定单位，最基础

定义

px 是「像素」的缩写，是屏幕显示的最小单位，尺寸固定不变（比如 1px 就是屏幕上的一个点），是最基础的 CSS 单位。

关键特点

无论屏幕大小、容器尺寸如何变化，100px 的宽度永远是 100 像素；
是「绝对单位」，适合需要固定尺寸的场景（如按钮高度、边框宽度）。

示例代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>px 单位示例</title>
  <style>
    .box {
      width: 200px; /* 固定宽度 200 像素 */
      height: 100px; /* 固定高度 100 像素 */
      background: #63a9c4;
      color: #fff;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <div class="box">宽度 200px（固定）</div>
</body>
</html>

适用场景

边框宽度（如 border: 1px solid #ccc）；
按钮/图标尺寸（如 width: 40px; height: 40px）；
文字大小（如 font-size: 14px，基础文字常用固定 px）；
固定尺寸的组件（如弹窗、卡片的最小宽度）。

2. %（百分比）------ 相对单位，相对于父容器

定义

% 是「百分比」，尺寸相对于父元素的对应属性计算（比如子元素宽度 50% = 父元素宽度 × 50%）。

关键特点

参考对象是「直接父容器」，不是屏幕；
不同属性的参考对象不同：
- 宽度/内边距/外边距（width/padding/margin）：相对父容器的宽度；
- 高度（height）：相对父容器的高度（父容器必须有固定高度，否则百分比高度无效）；
- 字体大小（font-size）：相对父容器的字体大小。

示例代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>% 单位示例</title>
  <style>
    .parent {
      width: 400px; /* 父容器固定宽度 */
      height: 200px; /* 父容器固定高度 */
      border: 1px solid #ccc;
      margin: 20px auto;
      padding: 10px;
    }
    .child {
      width: 50%; /* 父容器宽度 × 50% = 200px */
      height: 50%; /* 父容器高度 × 50% = 100px */
      background: #ee6666;
      color: #fff;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">宽度50%，高度50%</div>
  </div>
</body>
</html>

常见坑

给子元素设置 height: 50%，但父元素没有固定高度 → 子元素高度为 0（无效）；
解决：父元素设置固定高度，或用 Flex/Grid 让父元素撑满高度。

适用场景

自适应宽度的容器（如 width: 100%，撑满父容器）；
响应式内边距（如 padding: 2%，随父容器宽度缩放）；
Flex 子项的占比（如 width: 33.33%，均分父容器）；
图文混排的宽度占比（如图片宽度 40%，文字宽度 60%）。

3. vw/vh（视口单位）------ 相对单位，相对于屏幕视口

定义

vw：视口宽度（Viewport Width），1vw = 屏幕可视区域宽度 × 1%；
vh：视口高度（Viewport Height），1vh = 屏幕可视区域高度 × 1%；

关键特点

参考对象是「浏览器可视区域」（屏幕），不是父容器；
无论父容器尺寸如何，10vw 永远是屏幕宽度的 10%；
视口单位不随滚动条变化（滚动条会占用视口宽度，100vw 是包含滚动条的宽度）。

示例代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>vw/vh 单位示例</title>
  <style>
    .vw-box {
      width: 50vw; /* 屏幕宽度 × 50% */
      height: 20vh; /* 屏幕高度 × 20% */
      background: #91cc75;
      color: #fff;
      text-align: center;
      line-height: 20vh; /* 行高等于高度，文字垂直居中 */
      margin: 20px auto;
    }
    /* 全屏容器（常用技巧） */
    .full-screen {
      width: 100vw; /* 撑满屏幕宽度 */
      height: 100vh; /* 撑满屏幕高度 */
      background: #fac858;
      color: #fff;
      text-align: center;
      line-height: 100vh;
    }
  </style>
</head>
<body>
  <div class="vw-box">宽度50vw，高度20vh</div>
  <div class="full-screen">全屏容器（100vw × 100vh）</div>
</body>
</html>

适用场景

全屏布局（如登录页、首页banner，width: 100vw; height: 100vh）；
响应式文字大小（如 font-size: 4vw，文字随屏幕宽度缩放）；
适配不同屏幕的组件（如移动端卡片宽度 width: 90vw，留 5vw 边距）；
固定比例的容器（如 width: 80vw; height: 40vw，保持 2:1 比例）。

补充：vmin/vmax（视口最小/最大值）

vmin：取 vw 和 vh 中的较小值（如屏幕宽 375px、高 812px → 1vmin = 3.75px）；
vmax：取 vw 和 vh 中的较大值；
适用场景：适配横竖屏（如圆形按钮 width: 10vmin; height: 10vmin，横竖屏大小一致）。

三、核心对比表（快速查阅）

单位	参考对象	固定/相对	核心特点	典型场景
px	屏幕像素	固定	尺寸不变，兼容性最好	边框、按钮、基础文字
%	父容器对应属性	相对	随父容器变化，高度需父容器有固定高度	自适应宽度、内边距
vw	屏幕视口宽度	相对	随屏幕宽度变化，不依赖父容器	全屏布局、响应式文字
vh	屏幕视口高度	相对	随屏幕高度变化，100vh = 全屏高度	全屏页面、移动端适配

四、高频组合用法（必记）

1. 移动端适配：vw 做响应式文字

css 复制代码

/* 文字随屏幕宽度缩放，适配不同手机 */
body {
  font-size: 3.5vw; /* 屏幕宽度的 3.5%，如 375px 屏幕 → 13.125px */
}
h1 {
  font-size: 6vw; /* 大标题，随屏幕缩放 */
}

2. 全屏容器：vh + % 组合

css 复制代码

/* 全屏容器，内部元素相对容器百分比布局 */
.full-container {
  width: 100vw;
  height: 100vh;
  background: #f5f5f5;
}
.content {
  width: 80%; /* 相对全屏容器宽度的 80% */
  height: 80%; /* 相对全屏容器高度的 80% */
  margin: 0 auto;
  background: #fff;
}

3. 固定+自适应组合：px + %

css 复制代码

/* 卡片：固定内边距，自适应宽度 */
.card {
  width: 90%; /* 父容器宽度的 90% */
  margin: 0 auto;
  padding: 16px; /* 固定内边距，保证点击区域 */
  border: 1px solid #ccc;
  border-radius: 8px;
}

五、避坑关键要点（新手必看）

% 高度无效 ：子元素 height: XX% 必须满足「父元素有固定高度」，否则高度为 0；
vw 包含滚动条 ：100vw 是「屏幕宽度 + 滚动条宽度」，如果页面有滚动条，100vw 会比 100% 宽，导致横向滚动；
- 解决：用 width: 100% 替代 100vw（需要撑满屏幕宽度时）；
vh 在移动端的坑 ：移动端浏览器的地址栏/导航栏会占用视口高度，100vh 可能超出可视区域；
- 解决：用 min-height: 100vh 或 Flex 布局替代；
px 不是物理像素：CSS 中的 1px 不等于设备的物理像素（如 Retina 屏 1px = 2 物理像素），浏览器会自动适配，无需手动处理。

总结

固定尺寸用 px（边框、按钮、基础文字）；
相对父容器适配用 %（自适应宽度、内边距）；
相对屏幕适配用 vw/vh（全屏布局、移动端响应式）；
实际开发中常组合使用：
- 移动端：vw（文字/宽度） + px（内边距/边框）；
- PC 端：%（容器宽度） + px（固定组件尺寸）。

如果需要针对某类场景（如移动端适配、全屏页面）写具体的代码示例，我可以进一步细化。