【CSS篇】常见的 CSS 布局单位详解 —— px、%、em、rem、vw/vh

LuckySusu
375 阅读3分钟

在网页布局中，选择合适的CSS 单位是实现响应式设计和良好视觉效果的关键。不同的单位适用于不同的场景，理解它们之间的区别与联系，有助于我们写出更灵活、可维护的样式代码。

本文将带你全面了解常见的 CSS 布局单位：px、%、em、rem、vw/vh，并结合实际用例说明它们的使用场景和最佳实践。

📌 一、像素（Pixel）—— px

✅ 定义：

  • px 是 CSS 中最基础的单位；
  • 表示屏幕上的一个点（像素），但要注意区分“CSS 像素”和“物理像素”。

🧩 分类：

类型描述
CSS 像素开发者使用的抽象单位，浏览器自动缩放适配不同设备
物理像素屏幕硬件决定的最小显示单元，无法更改

💡 使用建议：

  • 适合固定尺寸的设计；
  • 在高分辨率屏幕上可能需要配合 rem 或媒体查询做适配；
  • 不具备响应性；
.box {
    width: 100px;
    height: 50px;
}

📌 二、百分比（Percentage）—— %

✅ 定义：

  • 百分比是相对于父元素或自身某些属性值的比例单位；
  • 广泛用于实现响应式布局。

🧩 特点：

元素属性百分比参考对象
width / height父元素的宽高
padding / margin父元素的宽度
font-size父元素字体大小
border-radius自身宽高

💡 使用建议：

  • 非常适合构建自适应容器；
  • 注意嵌套层级可能导致比例失真；
  • 配合 box-sizing 可以更好地控制盒模型；
.container {
    width: 80%;
    margin: 0 auto;
}

📌 三、相对单位：em 与 rem

✅ em：基于当前元素的字体大小

  • 相对于当前元素的 font-size；
  • 如果未显式设置，则继承自父元素；
  • 多层嵌套时可能会产生“放大效应”。

示例：

html {
    font-size: 16px;
}

.parent {
    font-size: 20px;
}

.child {
    font-size: 1.5em; /* 20px * 1.5 = 30px */
}

📌 适用场景：局部文本大小调整、组件内嵌套样式。

✅ rem：基于根元素的字体大小（推荐）

  • rem 是 CSS3 引入的单位；
  • 相对于 <html> 根元素的 font-size；
  • 所有子元素都统一参照同一个基准值，避免嵌套问题；
  • 非常适合响应式布局和移动端开发。

示例：

html {
    font-size: 16px;
}

.title {
    font-size: 2rem; /* 16px * 2 = 32px */
}

📌 优点：

  • 易于全局控制；
  • 便于实现响应式字体；
  • 适合搭配 JavaScript 动态计算根字号；

💡 移动端动态 rem 计算方案（伪代码）：

function setRem() {
    const baseSize = 16;
    const scale = document.documentElement.clientWidth / 750;
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
}

window.addEventListener('resize', setRem);
setRem();

📌 四、视口单位：vw、vh、vmin、vmax

✅ 定义：

单位含义说明
vw视口宽度的 1%，100vw = 整个视口宽度
vh视口高度的 1%，100vh = 整个视口高度
vminvw 和 vh 中的较小值
vmaxvw 和 vh 中的较大值

💡 使用建议：

  • 非常适合全屏背景图、标题、按钮等需要根据视口变化的元素；
  • 不受父级影响，独立于 DOM 结构；
  • 可用于实现响应式字体、动态间距等；

示例：

.fullscreen {
    width: 100vw;
    height: 100vh;
}

.title {
    font-size: 5vw; /* 字号随视口宽度变化 */
}

📌 注意：

  • 在 iOS 上，vh 的行为可能与预期不一致（软键盘弹出会影响视口高度）；
  • 可通过 JS 动态处理视口变化；

📊 五、常见单位对比总结表

单位类型是否响应相对基准推荐指数典型用途
px❌ 否绝对单位⭐⭐⭐固定尺寸、图标、边框等
%✅ 是父元素相关⭐⭐⭐⭐宽度、高度、间距等
em✅ 是当前元素字体大小⭐⭐⭐文本嵌套、组件内部
rem✅ 是根元素字体大小⭐⭐⭐⭐⭐响应式布局、移动端适配
vw/vh✅ 是视口大小⭐⭐⭐⭐全屏元素、动态字体

🧠 六、响应式设计中的单位组合建议

场景推荐单位组合
固定尺寸控件px
布局结构% + rem
响应式字体rem / vw
全屏背景100vw / 100vh
动态间距rem
图标尺寸px / em
avatar
文章
阅读
粉丝