RWD Intro
Responsive Web Design (RWD) means one set of HTML and CSS that looks right on every screen — phone, tablet, laptop, ultrawide. There's no separate "mobile site".
The three RWD ingredients
| Ingredient | Role |
|---|---|
| Fluid widths | Sizes in %, fr, vw, max-width — boxes shrink to fit. |
| Flexible images | max-width: 100%; height: auto stops media overflowing. |
| Media queries | Change layout, type, or spacing once the viewport crosses a threshold. |
Mobile-first vs desktop-first
CSS
/* Mobile-first (recommended): defaults are the small-screen layout */
.grid { display: grid; gap: 12px; }
@media (min-width: 768px) {
.grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
.grid { grid-template-columns: 1fr 1fr 1fr; }
}
Note: Don't forget the viewport meta tag in your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">. Without it, phones zoom out to a fake 980px viewport and your media queries never fire.Tip: Start every project mobile-first. It's almost always less code and forces you to prioritise content over chrome.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>RWD Intro</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Write a mobile-first query that triggers from 768px upwards.
@media (
-width: 768px) { /* tablet and up */ }
"This width or larger".
Discussion
Loading…