Open any good website on your phone and then on a laptop. The page rearranges itself. That's responsive web design.
Direct answer
Responsive web design means building pages that adapt to any screen size. You use flexible layouts (Flexbox and Grid), images that scale, and CSS media queries that change styles at certain widths, so one page works on phones, tablets and desktops.
Why it matters
- Most people visit sites from phones.
- One site is easier to maintain than separate mobile and desktop versions.
- Search engines prefer mobile-friendly pages.
- It makes pages more accessible.
The three ingredients
1. A viewport tag
In your HTML <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
2. Flexible layouts and images
img { max-width: 100%; height: auto; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
3. Media queries
.menu { display: flex; flex-direction: column; }
@media (min-width: 700px) {
.menu { flex-direction: row; }
}
On small screens the menu stacks, and from 700 pixels wide it becomes a row.
Mobile-first
Write styles for phones first, then add media queries for larger screens. It keeps the code simple.
Responsive vs adaptive
| Responsive | Adaptive | |
|---|---|---|
| Layout | Fluid at any width | Fixed layouts for set widths |
| Effort | Less to maintain | More versions to build |
Examples
Look at news sites, blogs and online shops on your phone and desktop. Notice the menu, images and columns change.
Learn it
- Know the basics: HTML and CSS.
- Learn Flexbox and Grid.
- Practise media queries on a real page.
- Test on a phone.
Where Teyro fits
Teyro's Responsive Web Design with CSS course builds a multi-section site using the box model, classes, Flexbox and Grid that adapts to phones, tablets and laptops. It is free to start, with ten-minute lessons.
The bottom line
Make it flexible, test on small screens first and add media queries where it breaks.
