@media — responsive design
@media (max-width: 600px) applies styles only on small screens. Resize your browser to see.
style.css
v3.1
style.css — the CSS rules
index.html — the HTML structure (what the CSS targets)
Live preview
updates as you type
🧠 How it works
@media (condition) { ... } applies the styles inside only when the condition is true. (max-width: 600px) — viewport is 600px wide or less (phones). (min-width: 768px) — viewport is 768px or wider (tablets/desktops). (orientation: portrait) — device is in portrait mode. Mobile-first approach: write base styles for mobile, then add @media (min-width: 768px) for desktop. Common breakpoints: 480px (phone), 768px (tablet), 1024px (laptop), 1280px (desktop).
✏️ Try these changes
-
Change max-width: 600px to max-width: 400px→ red color only shows on very narrow screens -
Change max-width: 600px to min-width: 600px→ red color shows on WIDE screens (opposite) -
Add a second @media (max-width: 400px) block with font-size: 10px→ third size kicks in on phones