Why Viewport units in CSS? - Purpose & Use Cases

The Big Idea

What if your webpage could magically fit any screen perfectly without extra code?

The Scenario

Imagine you want a box on your webpage to always fill the entire screen, no matter the device or window size. You try setting fixed widths and heights in pixels, like 800px wide and 600px tall.

The Problem

But when someone views your page on a smaller phone or a bigger monitor, the box is either too big or too small. You have to write many different styles for each screen size, which is slow and confusing.

The Solution

Viewport units let you size elements based on the visible screen area. For example, 100vw means 100% of the viewport width, and 100vh means 100% of the viewport height. This way, your box automatically fits the screen perfectly.

Before vs After

✗ Before

width: 800px; height: 600px;

✓ After

width: 100vw; height: 100vh;

What It Enables

Viewport units make your designs flexible and responsive, adapting smoothly to any screen size without extra work.

Real Life Example

Think of a fullscreen welcome page that always covers the entire browser window, whether on a phone, tablet, or desktop, giving a consistent look everywhere.

Key Takeaways

Fixed sizes don't adapt well to different screens.

Viewport units use the visible screen size for sizing.

This makes responsive design easier and more reliable.