查看: 112|回复: 1

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

[复制链接]
发表于 2 小时前 | 显示全部楼层 |阅读模式
前端开发中,不同CSS单位对页面布局的影响差异很大。理解px、rem、vw、vh这些常见单位的工作原理,是完成自适应和响应式设计的基础。本文通过实际代码示例,讲解它们的区别与使用场景。

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

示例代码:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>px单位示例</title>
  8. <style>
  9. div {
  10.   width: 200px;
  11.   height: 200px;
  12.   background-color: aqua;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div></div>
  18. </body>
  19. </html>
复制代码
运行这段代码,无论在PC还是移动端,div始终保持200px×200px。屏幕越小,盒子看起来越大,缩放体验较差。

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

示例代码:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>rem单位示例</title>
  8. <style>
  9. div {
  10.   width: 5.3333rem;
  11.   height: 5.3333rem;
  12.   background-color: aqua;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div></div>
  18. </body>
  19. </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):
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>vw单位示例</title>
  8. <style>
  9. div {
  10.   width: 26.6667vw;
  11.   height: 26.6667vw;
  12.   background-color: aqua;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div></div>
  18. </body>
  19. </html>
复制代码
视口宽度变化时,div的宽高等比例变化,保持相对于窗口的固定百分比。类似地,vh可以用于高度自适应。

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

五、实用技巧:利用vw/vh实现垂直居中
借助视口单位,可以用一行样式实现响应式垂直居中:
  1. #box {
  2.   width: 50vw;
  3.   height: 50vh;
  4.   margin: 25vh auto;
  5. }
复制代码
这样元素宽度为窗口宽度一半,高度为窗口高度一半,上下外边距各25vh,从而自动垂直居中。

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

使用道具 举报

发表于 1 小时前 | 显示全部楼层

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

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

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

指导单位

江苏省公安厅

江苏省通信管理局

浙江省台州刑侦支队

DEFCON GROUP 86025

Hacking Group 021A

旗下站点

态势感知中心

应急响应中心

红盟安全

联系我们

官方QQ群:112851260

官方邮箱:security#ihonker.org(#改成@)

官方核心成员

关注微信公众号

Archiver|手机版|小黑屋| ( 沪ICP备2021026908号 )

GMT+8, 2026-6-11 13:43 , Processed in 0.035385 second(s), 17 queries , Gzip On, Redis On.

Powered by ihonker.com

Copyright © 2015-现在.

  • 返回顶部