Stop Using vh & vw Before Understanding The New CSS Viewport Units

READ TIME - 4 MINUTES

Today, we’ll explore how to optimize responsive designs by replacing traditional vh and vw units with lv*, sv*, and dv*.

Using these new viewport units ensures your designs look great across all devices, without unexpected resizing issues.

Most people fail by relying too much on vh and vw units, which behave unpredictably on mobile, causing layout shifts when browser elements like the address bar appear and disappear.

How to Fix Your Layouts with Better Viewport Units

Responsive design has long relied on vh and vw, but these units often don’t account for dynamic changes in viewport height on mobile. This can lead to frustrating layout shifts for users. Fortunately, CSS has introduced lv*, sv*, and dv* units, which help to create a more stable design across different viewports.

Here’s what you need to know:

• Large Viewport Units (lvh & lvw): These refer to the largest possible viewport size when all browser UI elements are hidden.

• Small Viewport Units (svh & svw): These reflect the smallest possible viewport size when browser UI elements (like the address bar) are visible.

• Dynamic Viewport Units (dvh & dvw): These dynamically adjust based on the current viewport size, allowing for more responsive designs.

Key Takeaways

• vh and vw can cause layout issues on mobile due to browser UI changes.

• lv*, sv*, and dv* offer more control over viewport sizes.

• Small viewport units (sv*) are a safer bet for mobile.

• Large viewport units (lv*) work when some hidden content is acceptable.

• Dynamic viewport units (dv*) are flexible but can be costly in terms of performance.

Visual Explanation of Viewport Units

Below is an illustration from a tweet by Cory House (@housecor) that visually explains the differences between 100dvh, 100lvh, and 100svh. This will help you see how each unit affects the layout of a mobile browser:

Detailed Breakdown of Viewport Units

Large Viewport Units (lvh & lvw)

When you use lvh or lvw, you are working with the largest possible viewport, i.e., when the browser UI (like the address bar) is hidden.

These units are great for full-screen designs, where you don’t mind if some content temporarily hides behind the browser UI.

Small Viewport Units (svh & svw)

They are helpful for more consistent layouts where all content should be visible even when the browser UI is shown.

Dynamic Viewport Units (dvh & dvw)

If you need your design to adjust dynamically as the user scrolls and the browser UI changes, these units are ideal, though they come with a performance cost.

So Which One to Use?

Take it from this LinkedIn post by Edi Rodriguez:

Small viewport units are "safer" because always all content will be displayed. You will have to consider the additional space that may be freed up.

If you don't mind if some content is temporarily hidden, then large viewport units are your choice.

You can use dynamic viewport units to ensure the content is always displayed regardless of the viewport size. However, you have to keep in mind these 2 caveats:

1. They can cause content to resize when the user scrolls the page.

2. This can be disturbing to the user and costly in terms of performance.

So, remember...

These 3 CSS units can help you create responsive layouts.

Take into account its characteristics...

And use them to build awesome responsive apps!

Also, it’s important to keep in mind these 2 things mentioned in that LinkedIn post by Edi Rodriguez:

1. None of the viewport units consider the size of the scrollbars.

2. None of the viewport units take the size of the on-screen keyboard when opened into account.

Conclusion

Switching from vh and vw to the new CSS viewport units allows for greater control over responsive designs. By understanding how each unit works, you can create smoother, more predictable layouts that improve the user experience.

Take these new units into account next time you build a responsive app!

See you next Saturday!

Keep up the great work! :)