为什么写好的网页放在手机端浏览，内容全部挤到了一起？

当你兴致勃勃地用px写完一整套网页，在电脑上看起来完美无瑕，结果用手机打开瞬间变成"抽象派艺术"——按钮飞出屏幕，文字挤成一团，图片大到能当壁纸。这时候你才恍然大悟：px这个老顽固，早就该被时代淘汰了！

一、px的"霸权时代"该结束了

px就像一把 rigid 的尺子，在320px的iPhone SE和414px的iPhone 15 Pro Max面前，固执地保持着同样的长度。数据显示，2025年全球移动设备屏幕尺寸已超过200种，用固定像素单位就像穿均码衣服——总有一半人觉得不合身。

看看这个经典灾难现场：某电商网站用px定义了"加入购物车"按钮宽度为300px，结果在小屏手机上按钮溢出屏幕，用户只能看到"加入购"三个字。这种反人类设计，难怪转化率低得可怜。

二、rem：让网页学会"等比例缩放"

rem（Root EM）堪称CSS界的"变形金刚"，它的大小由根元素（html标签）的font-size决定。假设我们设置：

html { font-size: 16px; }  
.box { width: 10rem; /* 160px */ }  

当屏幕变小时，只需修改html的font-size，所有用rem定义的元素会集体"瘦身"。淘宝团队的flexible方案就是这么玩的，通过JS动态计算根字体大小：

document.documentElement.style.fontSize = screen.width / 7.5 + 'px'  

（7.5是750px设计稿的1/10）

现在有了postcss-pxtorem插件，连计算都省了！写CSS时直接用px，构建时自动转成rem：

/* 输入 */  
.box { width: 150px; }  
/* 输出 */  
.box { width: 2rem; }  

三、vw：视口宽度的"智能响应"

如果说rem是"半自动"，vw就是"全自动"。1vw等于视口宽度的1%，不管屏幕多大，都能自动分配空间。B站移动端就全面采用vw布局，实现了从320px到1200px屏幕的无缝适配。

配置postcss-px-to-viewport插件后，你可以像往常一样写px：

/* 输入 */  
.header { height: 88px; }  
/* 输出 */  
.header { height: 11.733vw; }  

（88px / 750px设计稿 = 11.733vw）

四、实战：rem+vw强强联合

聪明的开发者早就把两者结合起来用了：用vw设置根元素字体大小，再用rem定义具体元素。这样既保留了rem的精确控制，又有vw的自动适配：

html { font-size: 13.333vw; /* 100px/750px设计稿 */ }  
.box { width: 3rem; /* 300px */ }  

别忘了设置最大宽度，避免大屏设备元素过大：

@media (min-width: 750px) {  
  html { font-size: 100px; }  
  body { max-width: 750px; margin: 0 auto; }  
}  

五、兼容性？早就不是问题了！

还在担心老浏览器不支持？2025年的今天，全球95%以上的浏览器已经支持rem和vw。看看这份兼容性报告：

连IE9都部分支持，对于那些还在用上古浏览器的用户，建议直接弹出"您的设备该升级了"的温馨提示。

最后说句大实话

放弃px不是革命，是进化。当你的网页在所有设备上都能优雅展示时，用户停留时间会增加30%，转化率提升20%——这些数据可比固执的px值钱多了。现在就把你的CSS文件里的px批量替换成rem/vw，让网页从此"见风使舵"，适应各种屏幕！