55 Mins advanced
16. Responsive Design
Architecture
Responsive Web Design
Over 60% of web traffic comes from mobile phones. A website that only looks good on a 1440px desktop monitor is half-finished. Responsive design means your layout adapts intelligently to every screen size.
📱 Media Queries — The Core Tool
A media query is a CSS conditional block. It only applies its styles when the screen meets the condition:
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
.layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
padding: 16px;
background: #f5f5f5;
}
.card {
background: #00A3FF;
color: white;
padding: 20px;
border-radius: 8px;
font-family: sans-serif;
font-weight: bold;
text-align: center;
}
@media (max-width: 600px) {
.layout { grid-template-columns: 1fr; }
}
</style>
<div class="layout">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
<p style="font-family:sans-serif; font-size:12px; padding:8px; color:#666;">Resize your browser to see the grid collapse to 1 column on small screens.</p>
📏 Responsive Units
<style>
body { font-family: sans-serif; padding: 16px; }
.title { font-size: clamp(1.2rem, 4vw, 3rem); font-weight: bold; color: #1a1a2e; }
.fluid { width: 80%; max-width: 600px; background: #4FC3F7; color: white; padding: 12px; border-radius: 6px; margin: 8px 0; }
.viewport { width: 50vw; background: #66bb6a; color: white; padding: 12px; border-radius: 6px; margin: 8px 0; }
</style>
<p class="title">clamp() — Fluid Typography</p>
<div class="fluid">80% width, max 600px</div>
<div class="viewport">50vw (50% of viewport width)</div>
Knowledge Check
Ready to test your understanding of 16. Responsive Design?