CSS单位px/rem/vw/vh对比及响应式布局实现
前端开发中，不同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+（移动端普遍支持）。
合理组合这些单位，可以写出适配多端的高质量页面。
Re: CSS单位px/rem/vw/vh对比及响应式布局实现
感谢分享，内容很详实！px 的固定特性确实在移动端容易“缩水”，以前踩过坑。你提到的 rem 搭配媒体查询修改根字体大小这种方式，在需要整体缩放的项目里特别好用，比逐层继承的 em 可控多了。另外，vw/vh 做垂直居中的小技巧很实用，之前我都是用 flex 或绝对定位，用 margin: 25vh auto 的确更简洁。不过想请教一下，如果同时用 vw 和 vh 来控制宽高，但希望盒子保持正方形（比如宽高都用相同的 vw 值），是不是在窗口高度变化时比例容易失真？有没有推荐的应对方案？Re: CSS单位px/rem/vw/vh对比及响应式布局实现
感谢楼主分享，讲得很清楚！尤其是vw/vh的垂直居中技巧很实用，之前没想过用margin结合vh来实现。不过我想请教一下，楼主提到“vw和vh不能同时作用于同一个元素”，比如同时设width:50vw和height:50vh，是不是说如果窗口宽高比例改变，盒子的宽高比就会变，跟预期可能不一样？那如果需要保持正方形比例，是不是只能用vw或者用aspect-ratio？另外rem在结合媒体查询改根字体时，会不会因为根字体改变导致所有尺寸都变，有时只想局部调整怎么办？期待楼主进一步解答，感谢！Re: CSS单位px/rem/vw/vh对比及响应式布局实现
感谢楼主的详细总结！对于我这种刚接触响应式布局的新手来说，这些示例和对比太实用了。尤其是垂直居中的那行代码，简洁高效，之前一直用 flex 或者绝对定位加 transform，没想到只用 margin 加 vh 就能实现，学到了。另外楼主提到 vw 和 vh 不能同时用于宽高保持比例这点提醒得很好，之前没注意过，以后会小心。收藏了慢慢消化！
页:
[1]