Sizing & Units (px, rem, em, %, vh, vw)

In Plain English

CSS has absolute units (px) and relative units (rem, %, vw, vh). For accessible typography that respects user browser zoom, use rem. For responsive containers, use % and max-width. For full-screen layouts, use vh and vw.

The Mental Model

"px is like a wooden ruler marked in exact millimeters (rigid and unbending). rem and % are like rubber bands that stretch and scale gracefully depending on screen size and user eyesight settings."

Deep Dive: How It Works

px (Pixels): Absolute dot size on screen. Great for small borders (1px, 2px) and fixed icons.

rem (Root EM): Relative to the root <html> font size (default is 16px). 1rem = 16px, 1.5rem = 24px, 2rem = 32px. The standard for scalable typography!

% (Percentage): Relative to the parent container's width (e.g. width: 50% takes half the parent).

vw / vh (Viewport Width / Height): 100vw = 100% of browser window width; 100vh = 100% of browser window height.

max-width vs width: width: 800px overflows small mobile screens; max-width: 800px shrinks automatically on phones!

Syntax Blueprint

/* Scalable Typography */
h1 { font-size: 2.25rem; } /* 36px */

/* Responsive Container */
.container {
  width: 100%;
  max-width: 1200px;
  min-height: 100vh;
}

Use rem for typography and percentage with max-width for responsive shells.

Core Rules to Remember

rem for Text: Always use rem for font-size so visually impaired users can increase browser font size.

max-width > width: Always prefer max-width on containers so mobile screens don't break horizontally.

100vh for Full Screen: min-height: 100vh ensures hero sections fill the full vertical screen.

Common Beginner Traps & How to Fix Them

Mistake:Using fixed width: 1000px on body containers

Why it happens: Testing only on desktop monitors.

How to fix: Use max-width: 1000px; width: 100%; so it fluidly shrinks on smartphones.

Pro Tip: 1rem = 16px. To calculate rems easily: Divide your pixel target by 16 (e.g. 24px / 16 = 1.5rem)!

Live Interactive Example

Hit Run Code to see it live

Responsive Units in Action

CSS3

Live Browser Preview

Click "Preview / Apply" to view the rendered output.

How it works: The layout scales smoothly across desktop, tablet, and mobile screens.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Create a fluid responsive container

Write a CSS rule for .main-content with width: 100%; max-width: 800px; and font-size: 1.125rem;

Browser Preview & Output

Click "Run & Check" to test your solution.

Finished reading and practicing?