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. Here are six cases where vw is best avoided.
1. Border Widths
One of the most common mistakes is setting border widths in vw. Convert a 1px border from your design spec to vw and it ends up thinner than 1px on smaller screens. A 1px border from a 1440px design (0.0694vw) is about 0.26px on a 375px phone, and even a 1px border from a 375px design (0.2667vw) becomes 0.96px on a 360px screen.
2. Box Shadows
Shadow offset and blur values also deserve caution when converting to vw. Shadows exist to create a subtle sense of depth, and in vw they look very different from screen to screen. The 0.5vw 0.5vw 1vw shadow below has an offset of about 1.9px and a 3.75px blur on a 375px phone — barely visible — but a 9.6px offset and a 19.2px blur on a 1920px monitor, which is far too heavy.
/* Not recommended */
.card { box-shadow: 0.5vw 0.5vw 1vw rgba(0,0,0,0.1); }
/* Recommended (fixed px values) */
.card { box-shadow: 0 4px 10px rgba(0,0,0,0.1); }3. Font Size and Accessibility
Setting font sizes purely in vw means text doesn't grow when users zoom the browser (Ctrl +) or raise their default font size — zooming shrinks the viewport's CSS width, cancelling out the vw value. That makes WCAG 1.4.4 (Resize Text, 200%) hard to meet.
- The problem: Even when a user zooms the browser or increases their default font size, vw-based text only responds to viewport width, so it stays the same size.
- The fix: Set the min and max in rem and mix rem with vw in the preferred value, e.g.
clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem)(16px at 360px → 18px at 1280px). The bigger the vw share, the less zoom helps, so keep the max within 2.5× the min. - Note:
calc(1rem + 1vw)is better than vw alone, but on a 1440px screen, 200% zoom only makes the text about 1.53× larger (30.4px → 46.4px).
Use the Clamp Generator to calculate rem-based values and the PX to REM converter to convert fixed sizes.
4. Layouts Without Min/Max Constraints
If you set widths or heights in vw without a max-width, elements can grow far too large on ultrawide monitors and other very large displays. A 600px card from a 1440px design (41.667vw), for example, becomes about 1067px wide on a 2560px monitor.
5. Small Fixed-Size Icons
Bitmap icons such as PNGs blur when scaled up. Icon fonts and SVGs are vectors, so they don't pixelate, but their edges can look soft at fractional sizes. For example, a 24px icon from a 375px design converted to 6.4vw becomes 23.04px on a 360px screen and 24.96px on a 390px screen. Small icons designed on a 16px or 24px pixel grid stay sharper when locked to px.
6. Full-Width Elements Set to 100vw
Using width: 100vw to make an element span the full screen causes horizontal scrolling on Windows desktops, where the vertical scrollbar takes up space. That's because 100vw includes the scrollbar width (usually 15–17px). On macOS and mobile, scrollbars overlay the content and take up no space, so if you only test on a Mac, it's easy to miss.
/* Not recommended: overflows by the scrollbar width */
.hero { width: 100vw; }
/* Recommended */
.hero { width: 100%; }Conclusion
vw is a powerful tool, but it is not a silver bullet. Use vw for the broad strokes of your layout, then use px for borders, shadows, and small icons, rem-based clamp() for font sizes, and 100% for full-width elements. Knowing when to use each unit is what separates a fluid design from a fragile one.