过去很长一段时间，前端开发主要使用 px 作为尺寸单位。px 是固定单位，写多少就是多少，显示效果稳定，但缺乏灵活性。后来，为了适应不同屏幕，rem 逐渐流行起来。rem 基于根字体大小变化，能够实现整体缩放，比 px 更适应响应式布局。很多团队用它来做移动端适配。

但你如果去看一些大型互联网公司最新的前端项目，会发现一个明显变化：px 和 rem 的使用正在减少，取而代之的是 vw 和 clamp() 这样的新方案。

这不是盲目追新，而是因为前端开发的需求变了。我们不再满足于“在不同宽度的设备上显示正常”，而是追求“在任何尺寸下都显示舒适”。px 和 rem 虽然能用，但已经不够用了。

px 是固定值，无法根据屏幕自动调整。rem 虽然可以缩放，但通常需要借助媒体查询设置不同断点下的根字号，效果是阶梯式变化，不够平滑，维护起来也麻烦。

于是，vw 和 clamp() 开始被广泛采用。

什么是 vw？

vw 是“视口宽度”单位。1vw 等于屏幕宽度的 1%。也就是说，如果你的字体大小设置为 5vw，那么它会随着浏览器窗口宽度的变化自动调整。

例如：

.title {
  font-size: 5vw;
}

这样做的好处是，元素尺寸能够实时、平滑地变化，没有跳跃感，视觉上更连贯。

但 vw 也有问题：它太“自由”了。在大屏幕上，字可能会大得离谱；在小屏幕上，又可能小得看不清。我们需要一个办法，让它既能自动缩放，又不超出合理范围。

clamp() 函数解决了这个问题

clamp() 是 css 中的一个函数，它接收三个参数：最小值、首选值和最大值。它的作用是让数值在一个范围内动态变化，不会太大也不会太小。

基本写法是：clamp(最小值, 首选值, 最大值)

举个例子，如果我们希望一个标题字号在移动端不小于 20px，在桌面端不大于 40px，中间按视口宽度自适应，可以这样写：

.title {
  font-size: clamp(20px, 5vw, 40px);
}

这意味着：

• 字体最小为 20px，

• 理想状态是屏幕宽度的 5%，

• 最大不超过 40px。

这样一来，既保持了流畅的缩放效果，又避免了极端情况下的显示问题。

这种写法不仅代码更简洁，而且省去了多个媒体查询的维护成本。以往需要写好几段代码才能实现的效果，现在一行就能搞定。

px 和 rem 并没有完全被淘汰

px 仍然适合一些需要绝对固定的尺寸，比如边框粗细、阴影大小等。rem 在一些内部系统、文档类网页中依然实用，因为它们对精细度的要求不如用户端产品高。

但对于面向广大用户的产品，尤其是强调视觉和交互体验的网站或应用，vw + clamp() 的组合正在成为更主流的选择。它让UI真正实现了“流动布局”，视觉更自然，开发也更高效。

总的来说，前端单位的使用经历了从 px 到 rem，再到 vw 和 clamp() 的演变。这不仅是技术实现的变化，更反映了我们对于“响应式”理解加深——从适配几个断点，到迎接任意尺寸的屏幕。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/12889