Responsive Web Design: Making Sites Work on Any Screen
Learn responsive web design fundamentals including media queries, flexible layouts, mobile-first approach, and viewport settings that make your site work on phones, tablets, and desktops.
Over half of web traffic now comes from mobile devices. If your site only works on desktop, you’re losing half your visitors. Responsive web design is the approach of building sites that adapt to any screen size — phone, tablet, or desktop — using CSS.
The Viewport Meta Tag
Every responsive page starts with this tag in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Without it, mobile browsers zoom out to show the full desktop layout. This tag tells the browser to use the device’s actual width.
Media Queries
Media queries let you apply CSS only when certain conditions are met — like screen width:
/* Base styles — mobile first */
.card {
width: 100%;
padding: 1rem;
}
/* Tablet — 768px and up */
@media (min-width: 768px) {
.card {
width: 50%;
}
}
/* Desktop — 1024px and up */
@media (min-width: 1024px) {
.card {
width: 33.33%;
}
}Mobile-First vs Desktop-First
Mobile-first means you write base styles for mobile, then add media queries for larger screens (min-width). This is the recommended approach — mobile constraints force simplicity, and you progressively enhance.
Desktop-first does the opposite — start large, scale down (max-width). This often leads to CSS that’s harder to maintain.
Flexible Units
Fixed pixel values don’t adapt. Use relative units instead:
/* Avoid fixed widths */
.container { width: 960px; } /* Bad on mobile */
/* Use percentages or max-width */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* Flexible font sizes */
body { font-size: 1rem; } /* 16px, scales with user preference */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); } /* Fluid sizing */CSS Grid and Flexbox for Responsive Layouts
/* Grid that automatically adjusts columns */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}This single declaration creates a grid that shows 1 column on mobile, 2 on tablet, and 3+ on desktop — no media queries needed.
Conclusion
Responsive web design is not optional — it’s a baseline expectation for any modern website. Start with the viewport meta tag, use mobile-first media queries, choose flexible units over fixed pixels, and leverage CSS Grid’s auto-fit for adaptive layouts. Test on real devices or your browser’s DevTools mobile simulator.
Read next: CSS Flexbox in Plain English
External resource: MDN — Responsive Design
Related Articles
async/await in JavaScript: Making Async Code Readable
Learn how async/await in JavaScript works with clear examples. Understand how it replaces Promise chains, handles errors with try/catch, and makes asynchronous code easier to read.
How to Write Clean Functions in JavaScript
Learn how to write clean JavaScript functions that are easy to read, test, and maintain. This guide covers naming, single responsibility, pure functions, and avoiding common pitfalls.
CSS Flexbox in Plain English: A Beginner's Guide
Learn CSS Flexbox with simple, visual explanations. This guide covers display flex, justify-content, align-items, flex-wrap, and practical layouts every developer needs to know.