你有没有遇到过这种情况？在设计稿上完美呈现的按钮，到了用户的手机上突然变得拥挤不堪；精心调整的文字间距，在大屏显示器上却显得松散零碎。就像电影《罗生门》里不同视角的真相，在响应式布局的世界里，同一个单位在不同设备上也会呈现出截然不同的效果。
为啥 px 在响应式布局里不太靠谱
在开始之前，咱先搞清楚像素（px）是啥。简单来说，像素是屏幕上显示内容的最小单位，在物理设备上，它对应着屏幕上的一个光点。但在响应式场景下，它的 “固定性” 会成为短板。现代设备的像素密度（PPI）差异极大 —— 同样是 100px 的按钮，在 300PPI 的手机上实际物理宽度约 8.5mm，在 100PPI 的大屏显示器上却有 25.4mm，视觉感受天差地别。
现在 px 的合理使用场景其实很明确：那些不需要随屏幕缩放的细节元素：
/* 适合用px的场景：固定细节 */
.icon {
width: 24px; /* 图标需要固定尺寸保证辨识度 */
height: 24px;
}
.badge {
border-radius: 4px; /* 小圆角用px更精准 */
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 阴影参数固定更可控 */
}
/* 不适合用px的场景：布局元素 */
.container {
width: 1200px; /* 问题：在768px屏幕上会溢出 */
padding: 20px; /* 大屏上显得局促，小屏上可能过宽 */
}
设计稿上的 px 是 “参考值” 而非 “绝对值”，直接照搬很容易在极端设备上出问题。
## 响应式布局中的 “相对单位家族”
既然 px 不太给力，那我们就得依靠其他相对单位来实现响应式布局了。这些相对单位能根据不同的参考值动态调整元素的大小和位置，让布局在各种屏幕尺寸下都能保持和谐。
em
em 是一个相对单位，它的大小是相对于父元素的字体大小来计算的。比如说，如果父元素的字体大小是 16 px，那么在这个父元素内设置 1 em 就等于 16 px。如果子元素没有显式设置 font-size，就会继承父元素的 font-size，并以此为基准来计算 em 的值。
em 现在更多用在组件内部，保证元素间的比例协调。比如设计一个卡片组件：
/* 组件根元素设置基准 */
.card {
font-size: 16px; /* 组件内基准值 */
}
/* 组件内部元素用em保持比例 */
.card__title {
font-size: 1.25em; /* 20px， */
margin-bottom: 0.6em; /* 9.6px */
}
.card__content {
font-size: 1em; /* 16px，*/
line-height: 1.5em;
}
.card__btn {
padding: 0.4em 0.8em;
font-size: 0.9em;
}
需要调整组件大小时，只需修改根元素的 font-size：
/* 小尺寸卡片 */
.card--small {
font-size: 14px; /* 内部所有元素自动缩小 */
}
这种 “牵一发而动全身” 的特性，让 em 成为组件化开发的首选。
rem
REM 即 Root EM，从名字就能看出，它是相对于根元素（也就是 html 标签）的字体大小来计算的。无论元素嵌套多深，1 rem 始终等于根元素的字体大小。rem 是全局布局的主力，现在更流行结合动态计算根元素大小：
/* 基础设置 */
html {
font-size: 62.5%; /* 1rem = 10px（方便计算） */
}
/* 响应式调整根字体大小 */
@media (min-width: 1200px) {
html {
font-size: 75%; /* 大屏放大1.2倍 */
}
}
@media (max-width: 768px) {
html {
font-size: 56.25%; /* 小屏缩小0.9倍 */
}
}
这样一来，页面上所有用 rem 定义的元素都会同步缩放：
/* 布局元素 */
.header {
height: 8rem; /* 基础80px，大屏96px，小屏72px */
padding: 0 4rem; /* 内边距同步缩放 */
}
.container {
max-width: 120rem; /* 基础1200px，自适应变化 */
margin: 0 auto;
}
为什么要这样动态调整？因为人眼对 “绝对大小” 的感知是相对的 —— 在 6 英寸手机上看起来舒适的 80px 导航栏，在 27 英寸显示器上会显得过于纤细。rem 配合媒体查询，本质是在模拟 “物理尺寸的一致性”。
实际开发中，我们会用 postcss-pxtorem 自动转换单位：
/* 开发时写设计稿px */
.container {
width: 1200px;
padding: 40px;
}
/* 插件自动转换后 */
.container {
width: 120rem;
padding: 4rem;
}
既保留了开发时的直观性，又实现了响应式效果。
vw 和 vh
vw（视口宽度的 1%）和 vh（视口高度的 1%）的参考系是浏览器可视区域，这让它们能实现 “与屏幕同呼吸” 的布局。但直接使用容易出现极端情况 —— 比如在 1000px 宽的屏幕上，5vw 是 50px，到了 3000px 宽的屏幕上就变成 150px，可能过大。vw/vh 现在更注重精细化使用，常与 clamp() 配合避免极端尺寸：
/* 标题大小：随视口变化但有范围限制 */
.page-title {
font-size: clamp(1.8rem, 5vw, 3rem);
}
/* 图片容器：占满视口但留边距 */
.hero-image {
width: calc(100vw - 4rem);
height: 60vh;
max-height: 500px;
margin: 0 2rem;
}
新增的 dvw/dvh 单位（动态视口单位）更适合移动设备，会扣除地址栏等占用的空间：
/* 移动端全屏容器 */
.mobile-fullscreen {
height: 100dvh; /* 精确占满可视区域 */
}
百分比（%）
百分比的参考系是 “父元素对应属性的值”，这个特性让它适合实现 “容器自适应”。但要注意不同属性的参考系差异，看个例子：
/* 父元素设置固定宽度 */
.parent {
width: 400px;
height: 200px;
}
/* 子元素使用百分比单位 */
.child {
width: 50%; /* 400px * 50% = 200px */
height: 80%; /* 200px * 80% = 160px */
padding: 5%; /* 400px * 5% = 20px */
margin: 3%; /* 400px * 3% = 12px */
border-radius: 10%; /* 200px * 10% = 20px */
}
可以看到：子元素的 width 和 height 设置百分比时，是相对于直接父元素的 width 和 height；padding 和 margin 设置百分比时，不论是垂直方向还是水平方向，都相对于直接父元素的 width；border-radius 设置百分比则是相对于元素自身的宽度。
现在百分比常用来实现 “流动式侧边栏”：
.layout {
display: flex;
width: 90%; /* 占屏幕宽的90% */
max-width: 1400px;
margin: 0 auto;
}
.sidebar {
width: 25%; /* 占父容器的25% */
min-width: 200px;
}
.main-content {
width: 75%; /* 占父容器的75% */
}
当父容器（.layout）随屏幕缩放时，子元素会自动保持 25% 和 75% 的比例，同时 min-width 保证了侧边栏在小屏幕上也有合理尺寸。
响应式布局的其他关键知识点
媒体查询的 “移动优先” 策略
现在更推荐从移动设备出发，逐步增强大屏样式，用 @custom-media 简化断点管理（需 PostCSS 插件支持）：
/* 定义断点变量 */
@custom-media --md (min-width: 768px); /* 中屏 */
@custom-media --lg (min-width: 1024px); /* 大屏 */
/* 移动设备基础样式 */
.nav {
padding: 1rem;
}
.nav__list {
display: flex;
flex-direction: column; /* 小屏垂直排列 */
gap: 1rem;
}
/* 中屏及以上增强样式 */
@media (--md) {
.nav {
padding: 1.5rem 2rem;
}
.nav__list {
flex-direction: row; /* 中屏水平排列 */
gap: 2rem;
}
}
这种方式避免了 “大屏样式覆盖小屏样式” 的冗余代码，更符合响应式的本质。
Flex + Grid黄金搭档
Flexbox 适合一维布局（行或列），Grid 适合二维布局（行列交织），两者结合能应对绝大多数场景：
/* 产品列表：用Grid控制列数 */
.products {
display: grid;
grid-template-columns: 1fr; /* 小屏单列 */
gap: 2rem;
}
/* 中屏双列 */
@media (--md) {
.products {
grid-template-columns: repeat(2, 1fr);
}
}
/* 大屏自动适配列数，最小宽度280px */
@media (--lg) {
.products {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
}
/* 导航栏：用Flex控制对齐和换行 */
.nav {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap; /* 小屏自动换行，避免溢出 */
}
Grid 负责 “整体框架”，Flex 负责 “内部对齐”，这种组合既灵活又可控。
其实响应式布局的核心不是 “用什么单位”，而是 “理解每个单位的参考系”。px 适合固定细节，em 适合组件内比例，rem 适合全局缩放，vw/vh 适合视口绑定，百分比适合容器自适应 —— 它们不是非此即彼的关系，而是各司其职的伙伴。
