From the absolute dominance of px to rem becoming the de facto standard for responsive design,
it once seemed we had found the perfect solution.
However, if you look into the frontend codebases or design systems of leading tech companies today,
you’ll notice a new trend quietly emerging:
the use of px and rem is shrinking dramatically, being replaced by modern CSS units like vw and clamp().
This isn’t just another technical fad—it represents a fundamental paradigm shift. Our understanding of “responsive design” is evolving: from “switching between breakpoints” to “fluidly adapting at any size.”
Embracing True Fluid Layouts
Frontend development strives for the best user experience and development efficiency.
The “step-like” behavior and high maintenance cost of rem are no longer enough.
Enter the new approach built around vw and clamp().
1. VW (Viewport Width Units): Naturally Fluid
vw (Viewport Width) is directly tied to the viewport width.
1vw equals 1% of the viewport width.
This means an element’s size scales in real time—smoothly and continuously—as the browser window resizes.
.title {
/* Font size is always 5% of the viewport width */
font-size: 5vw;
}
This behavior cannot be replicated with rem + media queries: it delivers silky-smooth, fully linear scaling.
But vw has a fatal flaw: it lacks boundaries. On very large screens, 5vw can become absurdly huge. On tiny mobile screens, it may shrink to unreadable sizes.
2. Clamp(): The Elegant Boundary Control
CSS clamp() was designed to solve vw’s boundary problem.
It works like a “clip,” constraining a dynamic value between a minimum and maximum.
Syntax: clamp(MIN, PREFERRED, MAX)
- MIN: The minimum fallback value.
- PREFERRED: The ideal value, often based on
vw. - MAX: The maximum upper limit.
With a single clamp() declaration, you can often replace three or four media queries—while achieving smoother and more predictable results.
.title {
font-size: clamp(16px, 5vw, 32px);
}
Division of Roles: px, rem, and vw + clamp()
- px: Still the best choice for defining absolute, fixed values (e.g.,
border-width,box-shadowoffsets). - rem: A simple and reliable option in accessibility-focused contexts where fluid scaling is less important (e.g., documentation sites, admin dashboards).
- vw + clamp(): In consumer-facing products where visual polish and user experience are critical, this combination has become the new industry benchmark.
Conclusion
The evolution from px → rem → clamp() is not just a shift in CSS units. It reflects a deeper evolution in frontend philosophy: from fixed pixels, to responsive breakpoints, and now to a truly fluid, continuous web.