CSS Responsive Design
What is Responsive Design?
Responsive Web Design (RWD) makes websites look and work well on all screen sizes — from mobile phones to large desktop monitors. It uses three core techniques:
- Fluid layouts — use percentages and relative units instead of fixed pixels
- Flexible images — images scale within their containers
- Media queries — apply different styles at different screen sizes
Viewport Meta Tag
Always include the viewport meta tag in your HTML <head>. Without it, mobile browsers render the page at desktop width and scale it down.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Viewport meta tag — REQUIRED for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
</body>
</html>/* Fluid layout — use relative units */
.container {
width: 90%; /* 90% of viewport */
max-width: 1200px; /* but never wider than 1200px */
margin: 0 auto; /* center horizontally */
}
/* Fluid images */
img {
max-width: 100%; /* never wider than container */
height: auto; /* maintain aspect ratio */
}
/* Fluid typography */
html { font-size: 16px; }
h1 { font-size: clamp(1.5rem, 4vw, 3rem); } /* min, preferred, max */
p { font-size: clamp(1rem, 2vw, 1.2rem); }
/* Fluid spacing */
.section {
padding: clamp(20px, 5vw, 80px);
}Media Queries
Media queries apply CSS rules only when certain conditions are met — typically screen width. Use mobile-first approach: write base styles for mobile, then add styles for larger screens.
/* ===== MOBILE FIRST ===== */
/* Base styles — for all screens (mobile) */
.nav { display: none; } /* hide nav on mobile */
.hamburger { display: block; } /* show hamburger on mobile */
.grid { grid-template-columns: 1fr; } /* single column */
.sidebar { display: none; }
/* Small tablets — 576px and up */
@media (min-width: 576px) {
.container { max-width: 540px; }
}
/* Tablets — 768px and up */
@media (min-width: 768px) {
.container { max-width: 720px; }
.grid { grid-template-columns: repeat(2, 1fr); }
.nav { display: flex; }
.hamburger { display: none; }
}
/* Desktops — 992px and up */
@media (min-width: 992px) {
.container { max-width: 960px; }
.grid { grid-template-columns: repeat(3, 1fr); }
.sidebar { display: block; }
.layout {
display: grid;
grid-template-columns: 250px 1fr;
}
}
/* Large desktops — 1200px and up */
@media (min-width: 1200px) {
.container { max-width: 1140px; }
.grid { grid-template-columns: repeat(4, 1fr); }
}
/* ===== OTHER MEDIA FEATURES ===== */
/* Orientation */
@media (orientation: landscape) { ... }
@media (orientation: portrait) { ... }
/* Dark mode preference */
@media (prefers-color-scheme: dark) {
body { background: #1a1a2e; color: #eee; }
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* Print styles */
@media print {
.navbar, .sidebar, .ads { display: none; }
body { font-size: 12pt; color: black; }
a::after { content: " (" attr(href) ")"; }
}Responsive Patterns
/* Responsive navigation */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.nav-links {
display: flex;
gap: 20px;
list-style: none;
}
@media (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
position: absolute;
top: 60px;
left: 0;
right: 0;
background: white;
padding: 20px;
}
.nav-links.open { display: flex; }
}
/* Auto-responsive card grid — no media queries needed! */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
/* Cards automatically wrap based on available space */
/* Responsive table */
@media (max-width: 600px) {
table, thead, tbody, th, td, tr { display: block; }
thead tr { display: none; } /* hide headers */
td::before {
content: attr(data-label) ": ";
font-weight: bold;
}
}