Python Sizing & Units (px, rem, em, %, vh, vw)
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.
"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
Common Beginner Traps & How to Fix Them
Using fixed width: 1000px on body containersWhy it happens: Testing only on desktop monitors.
How to fix: Use max-width: 1000px; width: 100%; so it fluidly shrinks on smartphones.
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Create a fluid responsive container
- Write a CSS rule for .main-content with width: 100%; max-width: 800px; and font-size: 1.125rem;
Finished reading and practicing?
Mark this lesson as completed to update your course progress.