MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
In the previous lesson, you saw that absolute units (like px) are rigid and fixed. But the internet is accessed on thousands of different devices: from a small 360px smartphone in your pocket to a 1080px laptop, and even a 4K living room smart TV! 📱💻📺
How can a single website look incredible on all of them?
The answer is Relative Units! Unlike a rigid wooden ruler, relative units stretch and contract like a flexible rubber band based on the size of their parent element or the user's screen.
In this lesson, you will master the 5 core relative units:
%)rem (Root EM)em (Element EM)vw (Viewport Width)vh (Viewport Height)How data and code flow step-by-step
%)Percentages are always calculated relative to the parent element's dimensions.
If the parent box shrinks to 600px on a smaller screen, the sidebar automatically shrinks to 180px (30% of 600) and the main area shrinks to 420px. No broken code!
rem (Root EM — The Modern Standard ⭐)The letters rem stand for Root EM. It is relative exclusively to the root element of your webpage (<html>).
By default, all web browsers set root font size to 16px:
rem for Fonts and Padding:If a visually impaired student increases their phone's base text size from 16px to 20px, every single heading, paragraph, and padding on your website automatically scales up proportionally!
em (The Local Element Unit)While rem always looks at the root <html>, em looks at the font size of its immediate parent or the element itself!
font-size: 1em equals the font size of the parent element.padding or margin: 1em equals the font size of the element itself!em is Useful: Auto-Scaling ButtonsNotice how the button padding automatically scales up when the font size gets bigger!
em (The Snowball Effect):If you nest elements inside each other using em, the sizes multiply:
font-size: 1.2emfont-size: 1.2em (becomes 1.44em)font-size: 1.2em (becomes 1.728em!)This compound multiplication can create giant runaway text! That is why rem is preferred over em for general typography.
vw and vhThe Viewport is the visible rectangular window of your browser (excluding browser address bars and bookmarks).
1vw = 1% of the viewport width (If screen width is 1200px, 1vw = 12px).1vh = 1% of the viewport height (If screen height is 800px, 1vh = 8px).vh: Full-Screen Hero Sections ⭐Have you ever seen a website where the welcome section fills the user's screen completely?
Whether viewed on an iPhone, a tablet, or an ultrawide desktop monitor, 100vh fills the exact visible vertical window!
| Unit | Relative To | Best Used For |
|---|---|---|
px | Physical screen pixel dots | Borders (1px solid), small shadows, avatar circles |
% | Parent container's dimension | Column widths (50%), images (width: 100%) |
rem | Root <html> font-size (16px) | Fonts, paddings, margins (Accessible & predictable) |
em | Element's own font-size | Buttons that scale padding with text |
vw | Total browser window width | Responsive full-width ribbons, fluid text |
vh | Total browser window height | Full-screen hero banners (min-height: 100vh) |
| What Beginners Do (Don't ❌) | What You Should Do Instead (Do ✅) | Why? |
|---|---|---|
Using em for all font sizes across nested lists. | Use rem for body text and headings. | Deeply nested em creates an unintended snowball multiplication effect. |
Setting height: 100% expecting full screen. | Use min-height: 100vh;. | height: 100% only works if every ancestor (including body and html) has an explicit height declared. |
Forgetting that 1rem = 16px by default. | Use simple math: 2rem = 32px, 1.5rem = 24px. | Remembering the 16px base makes mental conversion effortless. |
%) scale relative to the parent container's width.rem scales relative to the root <html> font size (default 16px).em scales relative to the element's local font-size.100vw equals the entire browser screen width; 100vh equals the entire screen height.rem for typography and spacing, and %/vw/vh for layouts.Test your understanding with these multiple-choice questions:
rem stand for?margin-bottom: 2rem;?rem generally preferred over em for styling headings and paragraphs?width: 75%;?relative-units.html.vh, rem, and %:In the next lesson, we will continue your web styling journey with Responsive Units & The calc() Function (CSS Units and Measurements).
👉 Continue to Next Lesson: Responsive Units & The calc() Function →
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| Absolute Units: Pixels (px), Points (pt) | Responsive Units & The calc() Function |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.