CSS单位px/rem/vw/vh对比及响应式布局实现

脚本专家 · 发表于 2 小时前

前端开发中，不同CSS单位对页面布局的影响差异很大。理解px、rem、vw、vh这些常见单位的工作原理，是完成自适应和响应式设计的基础。本文通过实际代码示例，讲解它们的区别与使用场景。

一、px：固定像素单位
px是绝对单位，1px对应屏幕上的一个物理像素点。在PC端开发中常用，但移动端由于屏幕分辨率差异，固定px值不会随屏幕尺寸变化，导致布局在不同设备上表现不一致。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>px单位示例</title>
<style>
div {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

复制代码

运行这段代码，无论在PC还是移动端，div始终保持200px×200px。屏幕越小，盒子看起来越大，缩放体验较差。

二、rem：相对于根元素的相对单位
rem是CSS3引入的相对单位，全称“root em”。它相对于HTML根元素（即<html>标签）的font-size值。默认情况下1rem=16px，但可以修改根元素的font-size来全局控制。rem的优点是可以只调整根元素就能等比缩放所有使用rem的元素，避免em逐层继承带来的混乱。兼容性方面，IE9及以上支持。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rem单位示例</title>
<style>
div {
width: 5.3333rem;
height: 5.3333rem;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

复制代码

当根元素font-size为16px时，5.3333rem≈85.33px。但如果在移动端通过媒体查询将根元素font-size设为32px，那么盒子实际宽度变为170.66px，实现自适应。适合用于需要整体缩放的项目。

三、vw与vh：视口单位
vw（viewport width）和vh（viewport height）是相对于浏览器可视窗口宽度和高度的单位。1vw等于视口宽度的1%，1vh等于视口高度的1%。它们不依赖父元素或根元素，直接与窗口尺寸挂钩，非常适合实现响应式布局。不过要注意：vw和vh不能同时作用于同一个元素（如同时设置width: 50vw和height: 50vh虽然语法允许，但会导致盒子的宽高比例随窗口比例变化）。

示例代码（仅使用vw）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vw单位示例</title>
<style>
div {
width: 26.6667vw;
height: 26.6667vw;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

复制代码

视口宽度变化时，div的宽高等比例变化，保持相对于窗口的固定百分比。类似地，vh可以用于高度自适应。

四、em与pt单位补充说明
em是相对长度单位，相对于当前元素自身或父元素的字体大小。其计算公式为：1 ÷ 父元素字体大小 × 需要转换的像素值 = em值。例如父元素font-size=16px，则1.4em≈22.4px。em会继承父级，容易出现多层嵌套后尺寸难以预测的问题。
pt（磅）是物理长度单位，1pt=1/72英寸。在CSS中很少使用，更多用于印刷场景。

五、实用技巧：利用vw/vh实现垂直居中
借助视口单位，可以用一行样式实现响应式垂直居中：

#box {
width: 50vw;
height: 50vh;
margin: 25vh auto;
}

复制代码

这样元素宽度为窗口宽度一半，高度为窗口高度一半，上下外边距各25vh，从而自动垂直居中。

总结：
- 固定尺寸用px，适合PC端精确布局。
- 整体缩放用rem，适合移动端适配，结合媒体查询修改根字体大小。
- 随窗口大小变化用vw/vh，适合响应式全屏布局或字体大小自适应。
- 避免在复合嵌套中使用em，除非你能精确控制父级字体。
- 兼容性方面：rem支持IE9+，vw/vh支持IE10+（移动端普遍支持）。
合理组合这些单位，可以写出适配多端的高质量页面。

热心网友3 · 发表于 1 小时前

感谢分享，内容很详实！px 的固定特性确实在移动端容易“缩水”，以前踩过坑。你提到的 rem 搭配媒体查询修改根字体大小这种方式，在需要整体缩放的项目里特别好用，比逐层继承的 em 可控多了。另外，vw/vh 做垂直居中的小技巧很实用，之前我都是用 flex 或绝对定位，用 margin: 25vh auto 的确更简洁。不过想请教一下，如果同时用 vw 和 vh 来控制宽高，但希望盒子保持正方形（比如宽高都用相同的 vw 值），是不是在窗口高度变化时比例容易失真？有没有推荐的应对方案？

CSS单位px/rem/vw/vh对比及响应式布局实现

Re: CSS单位px/rem/vw/vh对比及响应式布局实现

指导单位

旗下站点

联系我们