CSS: CSS Responsive Basics
Last updated: 2026-10-13
Responsive design makes web pages look good on all devices — from mobile phones to desktop monitors.
1. Viewport Meta Tag
Must-have tag for responsive design:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Without this tag, mobile browsers render pages at desktop width (usually 980px) and shrink to fit — text becomes unreadable.
2. Media Queries
Apply different styles at different screen sizes:
▶ Example
▶ Try it Yourself3. Relative Units
| Unit | Reference | Best For |
|---|---|---|
% |
Parent element | Container widths |
em |
Parent font size | Padding, margins |
rem |
Root font size | Font sizes |
vw |
Viewport width | Full-width elements |
vh |
Viewport height | Full-screen sections |
▶ Example
▶ Try it Yourself4. Mobile-First Approach
Design for mobile first, then enhance for larger screens:
CSS
/* Base styles (mobile) */
.container {
width: 100%;
padding: 10px;
}
/* Tablet */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/* Desktop */
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
▶ Example
Mobile-first responsive typography:
▶ Try it Yourself5. Flexible Images
Make images responsive:
CSS
img {
max-width: 100%;
height: auto;
}
❓ FAQ
Q What happens without viewport meta tag?
A Mobile browsers render at desktop width (usually 980px), then shrink to fit phone screen. Text becomes unreadable, requiring pinch-zoom. The viewport meta tag is the foundation of responsive design.
Q How to choose media query breakpoints?
A Write mobile styles first (mobile-first), then enhance with min-width. Common breakpoints: mobile < 576px, tablet 768px, laptop 992px, desktop 1200px. Don't be constrained by these numbers — choose breakpoints based on your actual content.
Q Must responsive design use rem?
A Not necessarily.
rem suits font sizes; layout dimensions use %, fr, vw/vh. The key is not using fixed px for layout sizes. Font sizes: rem; containers: %; spacing: em or rem.📖 Summary
- Responsive design's core is "flexible adaptation" — use relative units, media queries, and flexible images
- Remember three steps: add viewport meta, use relative units, apply media queries at breakpoints
- Mobile-first is recommended — design for smallest screens first, then enhance
📝 Exercises
- Create a page: three columns on desktop, two on tablet, one on mobile (using media queries).
- Set font sizes with
rem, then modify rootfont-sizein media query to see proportional scaling. - Create a responsive navbar: horizontal on desktop, hidden (or hamburger) on mobile.
- Set
max-width: 100%on images, resize browser to see responsive behavior.
