Responsive design means a web page adapts so it looks good and works well on phones, tablets, laptops, and desktop screens. Instead of creating a separate version of the same page for every device, developers build one flexible layout that adjusts automatically.
HTML gives the page its structure, while CSS makes that structure responsive through flexible sizing, media queries, and adaptive layouts. A responsive page should keep content readable, controls easy to tap, and layouts free from horizontal scrolling.
This is one of the most important lines for mobile responsiveness. Without it, many mobile browsers render the page as if it were designed for a wide desktop screen, then shrink it down. That makes everything appear too small.
<head>
<!-- Always include this in every HTML page -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<!-- What each part means:
width=device-width - page width = device screen width
initial-scale=1.0 - no zoom on load
-->
Images need special attention in responsive design because large fixed images can easily break small layouts. A responsive image should fit within its tl-container while keeping the correct aspect ratio. Advanced techniques like srcset and picture help the browser choose the most suitable image file for the device.
<!-- Basic responsive image (CSS) -->
<img src="photo.jpg" alt="Photo"
style="max-width: 100%; height: auto;">
<!-- srcset: serve different sizes based on screen width -->
<img src="photo-800.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 900px) 800px,
1200px"
alt="Responsive photo">
<!-- picture element: art direction (different crops per screen) -->
<picture>
<!-- Mobile: portrait crop -->
<source media="(max-width: 600px)" srcset="hero-mobile.jpg">
<!-- Tablet: square crop -->
<source media="(max-width: 1024px)" srcset="hero-tablet.jpg">
<!-- Desktop: wide crop (fallback) -->
<img src="hero-desktop.jpg" alt="Hero image">
</picture>
<!-- Modern format with fallback -->
<picture>
<source srcset="photo.webp" type="image/webp">
<source srcset="photo.avif" type="image/avif">
<img src="photo.jpg" alt="Photo">
</picture>
Responsive layouts are usually built with Flexbox or CSS Grid. Instead of forcing every block into a fixed-size position, developers let sections stack, wrap, or resize depending on the available width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Responsive Layout</title>
</head>
<body>
<header>Header</header>
<div class="tl-container">
<main>Main Content</main>
<aside>Sidebar</aside>
</div>
<footer>Footer</footer>
</body>
</html>
/* Mobile first - base styles for small screens */
.container {
display: flex;
flex-direction: column;
padding: 0 16px;
}
main { width: 100%; }
aside { width: 100%; margin-top: 20px; }
/* Tablet and up */
@media (min-width: 768px) {
.container {
flex-direction: row;
gap: 24px;
}
main { flex: 1; }
aside { width: 280px; flex-shrink: 0; }
}
/* Desktop */
@media (min-width: 1200px) {
.container { max-width: 1200px; margin: 0 auto; }
}
Typography should scale as well. A large heading that looks great on desktop might feel oversized on mobile, while tiny paragraph text can feel too small on larger screens. Responsive typography keeps text balanced and readable.
/* Fluid font size using clamp(min, preferred, max) */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
h2 { font-size: clamp(1.25rem, 3vw, 2rem); }
p { font-size: clamp(0.9rem, 2vw, 1.1rem); }
/* Responsive font with media queries */
body { font-size: 14px; }
@media (min-width: 768px) { body { font-size: 16px; } }
@media (min-width: 1200px) { body { font-size: 18px; } }
A common best practice is to design for smaller screens first, then enhance the layout for tablets and desktops. This is called mobile-first design. It keeps the default experience simple and ensures the most important content is prioritized.
In mobile-first CSS, the base styles target phones. Larger-screen improvements are added later with min-width media queries.
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 768px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1200px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
Responsive layouts work best when you use flexible units such as percentages, rem, em, vw, and vh instead of relying only on fixed pixels. Flexible units help spacing, text, and containers scale more naturally.
.wrapper {
width: 90%;
max-width: 1100px;
margin: 0 auto;
}
.hero-title {
font-size: clamp(2rem, 6vw, 4rem);
}
.button {
padding: 0.75rem 1.25rem;
}
Breakpoints are screen widths where the layout changes. There is no single perfect set for every website, but many projects use ranges that roughly match mobile, tablet, laptop, and desktop layouts.
| Range | Typical Width | Common Layout Change |
|---|---|---|
| Mobile | Up to 767px | Single-column layout and stacked content |
| Tablet | 768px to 1023px | Two-column layouts and wider spacing |
| Laptop | 1024px to 1199px | Sidebars and larger content regions |
| Desktop | 1200px and above | Multi-column layouts and max-width containers |
max-width: 100% and height: auto.
%, rem, and clamp() help text and layout scale more naturally.
Explore 500+ free tutorials across 20+ languages and frameworks.