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

Choose sizing units that scale correctly for text, spacing, viewport sections, and responsive layouts.

Last reviewed: June 2026

·HTML5CSS3Responsive Web StandardsModern Browsers
✅
Quick Understanding: CSS core topics explain the cascade, selector targeting, spacing rules, and reusable styling choices that keep interfaces consistent as codebases grow. Units: px, %, rem, em, vh, vw matters because choose sizing units that scale correctly for text, spacing, viewport sections, and responsive layouts.

🔍 What Is It?

Different CSS units solve different problems. px is fixed, rem scales from the root, em scales from the current context, percentages respond to parent size, and viewport units respond to the screen.

🎯 Why Do We Need It?

Wrong unit choices create cramped text, layout bugs, inaccessible scaling behavior, and components that respond poorly across devices.

Why interviewers ask about this:

  • →They want to know whether you understand browser behavior, not only syntax
  • →Strong answers connect markup or styling choices to accessibility, maintainability, and production quality
  • →Senior candidates explain the trade-offs, not only the definition

🏗️ What Happens in Real Projects?

Units appear in typography, spacing, widths, heights, cards, hero sections, modal sizing, and sticky layout offsets.

⚙️ How It Works

Pick units based on what should stay fixed, what should scale, and what depends on parent or viewport dimensions.

💻 Example

Mixed-unit component sizing — A practical example of units: px, %, rem, em, vh, vw in a real frontend workflow.

css
h1 { font-size: 2rem; }
.card { width: 100%; max-width: 28rem; }
.hero { min-height: 100vh; }

🤔 Common Confusions

❓ Is Units: px, %, rem, em, vh, vw only a beginner topic?

No. Units: px, %, rem, em, vh, vw keeps affecting accessibility, layout resilience, and frontend maintainability long after a developer moves beyond the basics.

❓ What makes Units: px, %, rem, em, vh, vw hard in real projects?

The difficulty usually appears when real content, different browsers, mobile constraints, or reusable component rules expose assumptions that looked fine in a tiny demo.

❓ How should I answer Units: px, %, rem, em, vh, vw in interviews?

Explain the core behavior, then connect it to one real frontend scenario and one production failure mode. That shows deeper understanding than a raw definition alone.

🚨 Common Production Issues

Everything is hardcoded in px and becomes unfriendly to user scaling or accessibility settings.

Viewport units create mobile-height bugs when browser chrome changes.

Nested em usage becomes confusing because component context is not understood.

✅ Best Practices

Use rem for scalable typography and many spacing tokens.

Be deliberate with viewport units on mobile surfaces.

Understand what the percentage is relative to before using it.

Choose units based on behavior, not only familiarity.

🏛️ Architect's Note

Senior Architect's Perspective

Units: px, %, rem, em, vh, vw should be treated as part of the frontend system, not as an isolated trick. The architecture conversation is about clarity, resilience, accessibility, and whether multiple teams can keep using the pattern safely.

💬 Frequently Asked Questions

Interview: how do you explain Units: px, %, rem, em, vh, vw to a hiring panel?

Start with the browser behavior, then explain where units: px, %, rem, em, vh, vw appears in a real interface and what usually breaks when teams handle it carelessly.

Interview: what weak answer should I avoid for Units: px, %, rem, em, vh, vw?

Avoid giving only a textbook definition. Strong answers include one practical example, one production concern, and one reason the topic matters for accessibility, layout, or maintainability.

🎯 Key Takeaways

1Units: px, %, rem, em, vh, vw is more useful when you connect it to real interface behavior instead of memorized syntax.
2Strong HTML and CSS work balances structure, readability, accessibility, and maintainability.
3Frontend quality often depends on small markup and styling decisions compounding over time.
4The best explanations include what the browser does, why the team cares, and what goes wrong in production.

🎯 Practice this topic in interviews

↗ Where this topic fits

Sources

Sources / References

Use these HTML & CSS references to verify the concept in official docs and continue into the most relevant SplashRide pages.