Responsive Web Design Playground
Make Websites Fit Every Screen
Responsive design means your page looks great on phones, tablets, and desktops. Drag sliders and watch layouts adapt in real time.
The Viewport Meta Tag
Without this one line, mobile browsers render your page at desktop width and shrink it. With it, your CSS can respond to the actual screen size.
The line that makes everything work
Every responsive page MUST have this in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width — page width matches the device screen.
initial-scale=1.0 — no zoom when page first loads.
Without this tag, a phone renders your 1200px desktop layout and shrinks it to fit 375px. With it, the phone tells CSS "I'm 375px wide" so your media queries work.
Toggle to see the difference:
Phone (375px)
Desktop (1200px)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ALWAYS include this in your <head> -->
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
CSS Units: px vs % vs rem vs vw
Different units behave differently when the screen resizes. Drag the "screen width" slider to see which units are responsive and which are not.
Summary
px = fixed, never changes.
% = relative to parent width.
rem = relative to root font size.
vw = relative to viewport width.
Bar width shows relative size at current screen width. Notice: px NEVER changes.
<div class="box">Content</div>
Media Queries & Breakpoints
Media queries apply different CSS rules at different screen widths. Drag the slider to cross breakpoints and watch the layout change.
How media queries work
@media (max-width: 768px) { ... } means "apply these styles when the screen is 768px or narrower." You set breakpoints where your design starts to look bad, and add new rules to fix it.
Standard breakpoints used in this demo:
● 768px — Tablet
● 1024px — Desktop
Active rules: Desktop styles
<div class="container"> <nav>...</nav> <div class="cards">...</div> </div>
Fluid Typography with clamp()
clamp(min, preferred, max) makes text scale smoothly between a minimum and maximum size. No breakpoints needed.
How clamp works:
It picks the preferred value (vw), but never goes below the min or above the max. Result: text that scales smoothly.
Computed size: 24px
Responsive Text
<h1>Responsive Heading</h1>
Live Resize: Watch a Full Page Respond
Click a device size and watch a real web page adapt. This is what responsive design looks like in practice.
<div class="page"> <nav>...</nav> <main>...</main> <footer>...</footer> </div>