Media Queries & Breakpoints
Media queries let you apply CSS rules based on device characteristics — screen width, orientation, resolution, and even user preferences like dark mode. Combined with the mobile-first approach, they create layouts that adapt seamlessly from phones to ultrawide monitors.
40 min•By Priygop Team•Last updated: Feb 2026
Media Query Syntax & Common Breakpoints
- Mobile-first: Start with mobile styles, add complexity with @media (min-width: ...) queries
- Common breakpoints: 640px (large phones), 768px (tablets), 1024px (laptops), 1280px (desktops), 1536px (ultrawide)
- @media (min-width: 768px) { ... } — Styles apply at 768px and wider
- @media (max-width: 767px) { ... } — Styles apply below 768px. Avoid max-width in mobile-first design
- @media (prefers-color-scheme: dark) — Detect system dark mode preference
- @media (prefers-reduced-motion: reduce) — Disable animations for users who prefer less motion
- viewport meta tag: <meta name='viewport' content='width=device-width, initial-scale=1.0'> — REQUIRED for responsive design
Responsive Design Code
Example
/* Mobile-first approach */
.container {
padding: 16px;
max-width: 1200px;
margin: 0 auto;
}
/* Cards: single column on mobile, 2 on tablet, 3 on desktop */
.card-grid {
display: grid;
gap: 20px;
grid-template-columns: 1fr; /* Mobile: single column */
}
@media (min-width: 640px) {
.card-grid {
grid-template-columns: repeat(2, 1fr); /* Tablet: 2 columns */
}
}
@media (min-width: 1024px) {
.card-grid {
grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
}
}
/* Navigation: stack on mobile, horizontal on desktop */
.nav-links {
display: flex;
flex-direction: column; /* Mobile: stacked */
gap: 8px;
}
@media (min-width: 768px) {
.nav-links {
flex-direction: row; /* Desktop: horizontal */
gap: 24px;
}
}
/* Hide/show elements responsively */
.mobile-menu { display: block; }
.desktop-nav { display: none; }
@media (min-width: 768px) {
.mobile-menu { display: none; }
.desktop-nav { display: flex; }
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a2e;
--text: #e0e0e0;
--card-bg: #16213e;
}
}Try It Yourself: Responsive Layout
Try It Yourself: Responsive LayoutHTML
HTML Editor
✓ ValidTab = 2 spaces
HTML|28 lines|2291 chars|✓ Valid syntax
UTF-8