Viewport units are incredibly convenient for responsive web development — everything scales automatically with the screen. But experienced developers never blindly convert every px value to vw. In certain situations, a fixed px value or another relative unit like rem is simply the better choice.
1. Border Widths
One of the most common mistakes is setting border widths in vw. Take a 1px border from your design spec: convert it to vw, and on mobile devices it can easily end up thinner than 0.5px.
⚠️ The Disappearing Border Problem
When a border drops below 1px on small screens, it may render blurry or vanish entirely depending on how the browser handles sub-pixel rendering. Borders should always use fixed px values.
2. Box Shadows
Shadow offset and blur values also deserve caution when converting to vw. Shadows exist to create a subtle sense of depth — if they shrink along with the viewport, that depth disappears and the design starts to look muddy.
3. Text Readability and Accessibility
Setting font sizes purely in vw ignores the user's browser settings, such as their preferred font size. That is a direct violation of web accessibility standards.
- The problem: Even when a user increases their system font size, vw-based text only responds to viewport width — it never gets any bigger.
- The fix: Use
clamp()to guarantee a minimum font size, or combine rem and vw with something likecalc(1rem + 1vw).
4. Layouts Without Min/Max Constraints
If you set widths or heights in vw without a max-width, elements can grow to absurd sizes on ultrawide monitors and other very large displays.
💡 How to Fix It
Whenever you use vw, always pair it with max-width or clamp() to set the breaking point where your design would otherwise fall apart.
5. Fixed-Ratio Icons
For bitmap image icons and icon fonts (as opposed to SVG), scaling with vw can introduce aliasing artifacts or degrade rendering performance. Small, precise graphic elements look visually sharper when locked to px.
Conclusion
vw is a powerful tool, but it is not a silver bullet. Use vw for the broad strokes of your layout, and mix in px or rem for the details — borders, spacing, and precisely sized type. Knowing when to use each unit is what separates a fluid design from a fragile one.