HTML & CSS - Mastery / Responsive Design

Units: px,%, em, rem, vw, vh

1️⃣ px – Pixels (Absolute Unit)

  • A fixed size unit.

  • 1 px = 1 pixel on the screen (not responsive).

  • Doesn’t scale with screen or zoom preferences.

2️⃣ % – Percentage (Relative Unit)

  • Relative to the parent element.

  • Often used in widths, heights, padding, and margins.

3️⃣ em – Relative to Parent’s Font Size

  • 1 em = current element’s parent font size.

  • Can cascade if nested (may lead to unexpected scaling).

4️⃣ rem – Relative to Root Font Size

  • rem = root em (based on <html> element’s font size).

  • More predictable than em.

5️⃣ vw – Viewport Width

  • 1 vw = 1% of the browser's viewport width.

  • Adjusts with screen resizing.

6️⃣ vh – Viewport Height

  • 1 vh = 1% of the viewport height.

🔄 Comparison Table

Unit

Relative To

Responsive

Common Use

px

Screen pixel

❌

Borders, icons

%

Parent container

✅

Widths, padding

em

Parent font size

✅

Buttons, spacing

rem

Root font size

✅

Typography, layout

vw

Viewport width

✅

Hero images, sections

vh

Viewport height

✅

Fullscreen designs

🧠 Tips for Using Units:

  • Use rem and % for scalable, accessible design.

  • Avoid too much nesting with em.

  • Combine vw/vh with media queries for best responsiveness.

  • Use px only when pixel precision is necessary.

  • CSS Units: px, %, em, rem, vw, vh