Why responsive design?
People visit from phones, tablets, laptops and large screens. A responsive site adapts its layout to each screen so that text stays readable and buttons stay easy to tap.
Step 1: The viewport tag
<meta name="viewport" content="width=device-width, initial-scale=1">Step 2: Flexible units and images
img { max-width: 100%; height: auto; }
.container { width: min(100% - 2rem, 1100px); margin-inline: auto; }Step 3: Media queries
A media query applies styles only when a condition is true.
<style>
.cards { display: grid; gap: 12px; grid-template-columns: 1fr; }
.cards div { background: #dbeafe; padding: 20px; border-radius: 10px; }
@media (min-width: 600px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); } }
</style>
<div class="cards"><div>A</div><div>B</div><div>C</div></div>
<p>Resize the window to see the layout change.</p>Mobile-first
Write styles for small screens first, then add min-width queries for larger screens. This keeps CSS simpler and pages faster on phones.
Common breakpoints
Use breakpoints where your content starts to look bad, not for specific devices. Typical starting points are about 600px, 900px and 1200px.
Other useful queries
@media (prefers-color-scheme: dark) { body { background: #0f172a; color: #e2e8f0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
@media print { nav, footer { display: none; } }Test properly
Use your browser's developer tools device mode, and test on a real phone. Check tap targets, text size and horizontal scrolling.
Practice
Take your profile page from the HTML project and make it look good from 320px to 1440px wide.