by Kyrylo Silin
CSS Responsiveness Showdown
clamp() vs Media Queries
Same content. Same window. Resize slowly — watch the left glide, watch the right snap.
clamp() lets a value scale smoothly between a minimum and maximum.
No media queries needed for the value itself. The left side uses clamp(). The right side uses traditional media queries.
↓ scroll down
01 — Typography
font-size: clamp(24px, 5vw, 64px);
01 — Typography
@media (max-width:639px) { font-size:24px; }
@media (min-width:640px) { font-size:32px; }
@media (min-width:1024px) { font-size:48px; }
@media (min-width:1440px) { font-size:64px; }
clamp() makes font sizes fluid. The text grows or shrinks continuously as you resize the window.
With media queries, text only changes at specific breakpoints, creating visible jumps.
The quick brown fox jumps
Text size scales continuously. Reading rhythm stays consistent at any width.
SNAP
The quick brown fox jumps
Text size jumps at each breakpoint. The reading experience changes abruptly.
02 — Sizing & Spacing
height: clamp(40px, 4vw, 64px);
font-size: clamp(14px, 1.6vw, 24px);
gap: clamp(4px, 1vw, 24px);
02 — Sizing & Spacing
@media (max-width:639px) { height:40px; .links { display:none; } }
@media (min-width:640px) { height:48px; .links { gap:10px; } }
@media (min-width:1024px) { height:56px; .links { gap:18px; } }
@media (min-width:1440px) { height:64px; .links { gap:24px; } }
Multiple properties (height, font-size, spacing) scale together smoothly with clamp().
Media queries require separate rules for each breakpoint, and some elements (like nav links) must be hidden completely.
03 — Card Grid
grid-template-columns: repeat(auto-fit,
minmax(clamp(120px, 18vw, 280px), 1fr));
03 — Card Grid
@media (max-width:639px) { grid-template-columns: 1fr; }
@media (min-width:640px) { grid-template-columns: 1fr 1fr; }
@media (min-width:1024px) { grid-template-columns: 1fr 1fr 1fr; }
Using clamp() inside minmax() creates a truly fluid grid.
The number of columns adjusts naturally based on available space. Media queries force hard jumps between 1, 2, or 3 columns.
04 — Border Radius
border-radius: clamp(4px, 9vw, 999px);
04 — Border Radius
@media (max-width:639px) { border-radius:8px; }
@media (min-width:640px) { border-radius:32px; }
@media (min-width:1024px) { border-radius:120px; }
@media (min-width:1440px) { border-radius:999px; }
One clamp() rule can create a smooth transformation — for example, turning a rounded box into a pill shape as the screen grows.
Media queries require multiple hardcoded values and create abrupt visual changes.
gentle
strong
becomes pill
subtle
SNAP
sharp→round
sharp→round
snaps to pill
square→soft
05 — Box Shadow
box-shadow: 0 clamp(2px,0.5vw,14px)
clamp(8px,2vw,48px) light-dark(rgba(0,0,0,0., rgba(255,255,255,0.12));
05 — Box Shadow
@media (max-width:639px) { box-shadow: ... light-dark(...) }
@media (min-width:640px) { box-shadow: ... light-dark(...) }
@media (min-width:1024px) { box-shadow: ... light-dark(...) }
@media (min-width:1440px) { box-shadow: ... light-dark(...) }
Shadow depth and blur radius can scale fluidly with clamp(), making elevation feel more natural and physically consistent.
Media queries create stepped changes that can feel disconnected from the element’s size.
Shallow elevation
Deeper elevation
SNAP
Shallow elevation
Deeper elevation
06 — Aspect Ratio
padding-bottom: clamp(50%, calc(100% - 20vw), 100%);
06 — Aspect Ratio
@media (max-width:639px) { padding-bottom: 100%; }
@media (min-width:640px) { padding-bottom: 75%; }
@media (min-width:1024px) { padding-bottom: 56.25%; }
@media (min-width:1440px) { padding-bottom: 50%; }
clamp() can fluidly change aspect ratios using the padding-bottom technique.
The container smoothly transitions from near-square to wide landscape. Media queries force hard jumps between fixed ratios.
image / video — ratio morphs fluidly
SNAP
image / video — ratio snaps
07 — Real Component
padding: clamp(20px, 3vw, 36px);
border-radius: clamp(8px, 1.5vw, 20px);
box-shadow: 0 clamp(4px,0.8vw,16px) clamp(12px,2vw,40px) ...;
font-size: clamp(28px, 4vw, 42px);
07 — Real Component
@media (max-width:639px) { padding:20px; border-radius:8px; ... }
@media (min-width:640px) { padding:24px; border-radius:12px; ... }
@media (min-width:1024px) { padding:28px; border-radius:16px; ... }
@media (min-width:1440px) { padding:36px; border-radius:20px; ... }
A realistic component using multiple clamp() values. Padding, border-radius, shadow, and price all scale together
in one cohesive system. Media queries require many rules and create visual inconsistency between breakpoints.
Pro
$29
per month
• Unlimited projects
• Priority support
• Advanced analytics
Choose plan →
SNAP
Pro
$29
per month
• Unlimited projects
• Priority support
• Advanced analytics
Choose plan →