Why Relative units in CSS? - Purpose & Use Cases

The Big Idea

What if your website could magically fit every screen perfectly without you lifting a finger?

The Scenario

Imagine you are designing a website and you set all font sizes and spacing using fixed pixel values like 16px, 20px, or 30px.

At first, it looks fine on your screen, but when you view it on a phone, tablet, or a bigger monitor, the text and layout either look too small or too big.

The Problem

Using fixed sizes means your site doesn't adjust well to different screen sizes or user preferences.

Users with poor eyesight might struggle because text can't scale properly.

It's also a lot of work to change every pixel value manually for different devices.

The Solution

Relative units like em, rem, %, and vw let your design adapt automatically.

They scale based on the user's settings or the size of the screen, making your site flexible and easier to maintain.

Before vs After

✗ Before

font-size: 16px;
margin: 20px;

✓ After

font-size: 1rem;
margin: 1.25rem;

What It Enables

Relative units enable your website to look good and be readable on any device or screen size without extra work.

Real Life Example

Think about reading a news article on your phone versus a desktop. With relative units, the text adjusts so it's comfortable to read on both devices.

Key Takeaways

Fixed sizes don't adapt well to different screens or user needs.

Relative units make designs flexible and accessible.

They save time by reducing manual adjustments for different devices.