Make layouts adapt to any screen with media queries, container queries, and fluid typography using clamp().
Why: @media applies styles only when a condition is true. Mobile-first means writing base styles for small screens, then using @media (min-width) to progressively enhance for larger screens.
<!DOCTYPE html>
<html><head>
<style>
body { font-family: sans-serif; padding: 16px; }
.grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 500px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 760px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-color-scheme: dark) {
body { background: #0f172a; color: white; }
.card { background: #1e293b; border-color: #334155; }
}
.card { background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; font-size: 14px; }
</style>
</head><body>
<div class="grid">
<div class="card">Card 1 — resize the preview to see the grid change</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
<div class="card">Card 5</div>
<div class="card">Card 6</div>
</div>
</body></html>Why: @container styles elements based on their parent's size — not the viewport. The same component can look different in a narrow sidebar vs. a wide column. Drag the resize handle to see it.
<!DOCTYPE html>
<html><head>
<style>
.wrapper {
container-type: inline-size;
container-name: card-box;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 12px;
resize: horizontal;
overflow: hidden;
min-width: 200px;
max-width: 100%;
}
.card { display: flex; flex-direction: column; gap: 8px; font-family: sans-serif; font-size: 14px; }
.card img { width: 100%; height: 80px; object-fit: cover; border-radius: 6px; }
@container card-box (min-width: 420px) {
.card { flex-direction: row; align-items: center; }
.card img { width: 120px; flex-shrink: 0; }
}
</style>
</head><body style="padding:16px;font-family:sans-serif">
<p style="font-size:13px;color:#555;margin-bottom:10px">Drag the resize handle on the right edge</p>
<div class="wrapper">
<div class="card">
<img src="https://picsum.photos/seed/cq/400/200" />
<div>
<strong>Container Query</strong>
<p style="margin:4px 0;color:#555">Switches to row layout at 420px wide — based on container size, not viewport.</p>
</div>
</div>
</div>
</body></html>Fluid type scales font-size smoothly between a minimum and maximum as the viewport grows. clamp(min, preferred, max) is the cleanest approach — no breakpoints needed.
<!DOCTYPE html>
<html><head>
<style>
body { font-family: sans-serif; padding: 24px; }
h1 { font-size: clamp(1.5rem, 5vw, 3.5rem); font-weight: 800; margin: 0 0 8px; }
h2 { font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 700; margin: 0 0 8px; }
p { font-size: clamp(0.9rem, 1.5vw, 1.1rem); line-height: 1.7; color: #444; }
.section { padding: clamp(16px, 4vw, 48px); background: #f8fafc; border-radius: 12px; }
</style>
</head><body>
<div class="section">
<h1>Fluid Heading One</h1>
<h2>Fluid Heading Two</h2>
<p>This text scales fluidly too. Resize the preview — on narrow viewports it stays at the minimum size, on wide ones it grows to the maximum. No media query breakpoints needed. Try editing the clamp() values.</p>
</div>
</body></html>