CSS Responsive Basics
Responsive design makes web pages look good on all devices — from mobile phones to desktop monitors.
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.
Media Queries
Apply different styles at different screen sizes:
Example
HTML
<style>
.box {
background: #3498db;
color: white;
padding: 20px;
text-align: center;
}
/* Mobile: single column */
@media (max-width: 576px) {
.box { background: #e74c3c; }
}
/* Tablet: two columns */
@media (min-width: 577px) and (max-width: 992px) {
.box { background: #f39c12; }
}
/* Desktop: three columns */
@media (min-width: 993px) {
.box { background: #2ecc71; }
}
</style>
<div class="box">Responsive box — resize browser to see color change</div>
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
HTML
<style>
.rem-demo {
font-size: 1.2rem; /* Relative to root */
}
.vw-demo {
width: 80vw; /* 80% of viewport width */
}
</style>
<div class="rem-demo">Text using rem units</div>
<div class="vw-demo">80% viewport width</div>
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;
}
}
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.