Media queries are CSS rules that apply styles based on device characteristics like screen width, height, orientation, and resolution. They are the foundation of responsive web design, allowing you to create layouts that adapt to different devices. Understanding how to write and organize media queries effectively is essential for building modern responsive websites.
Key Takeaways
- Media queries apply CSS rules conditionally based on device features
- Mobile-first media queries use
min-widthand scale up from small screens - Common breakpoints are 480px, 768px, 1024px, and 1200px
- Media queries can target width, height, orientation, resolution, and more
- Organize media queries by component for maintainability
- Excessive media queries indicate inflexible design—aim for fluid layouts
What Are Media Queries?
Media queries are CSS at-rules that test device features and apply styles when conditions match.
Basic syntax:
@media (min-width: 768px) {
/* Styles for screens 768px and wider */
.container {
max-width: 960px;
}
}
This media query tests if the viewport is at least 768 pixels wide. If true, the styles inside apply.
Media queries enable responsive design by letting you adapt layouts to different screen sizes without changing HTML.
Media Query Syntax
Basic Structure
@media [media-type] ([media-feature]) {
/* CSS rules */
}
Media Types
@media screen { } /* Computer screens, tablets, phones */
@media print { } /* Print preview and printed pages */
@media all { } /* All devices (default) */
Most responsive design uses screen or omits it (defaults to all).
Media Features
@media (min-width: 768px) { }
@media (max-width: 1023px) { }
@media (orientation: landscape) { }
@media (min-resolution: 2dppx) { }
These test specific device characteristics.
Common Media Features
Width and Height
@media (min-width: 768px) { } /* At least 768px wide */
@media (max-width: 767px) { } /* At most 767px wide */
@media (min-height: 600px) { } /* At least 600px tall */
Width-based queries are most common for responsive design.
Orientation
@media (orientation: portrait) { } /* Taller than wide */
@media (orientation: landscape) { } /* Wider than tall */
Useful for tablets that rotate between portrait and landscape.
Resolution
@media (min-resolution: 2dppx) { } /* Retina displays */
@media (min-resolution: 192dpi) { } /* Same, different unit */
Target high-DPI displays for sharper images and graphics.
Aspect Ratio
@media (min-aspect-ratio: 16/9) { }
@media (aspect-ratio: 4/3) { }
Rarely used but available for specific layout needs.
Logical Operators
AND
Combine multiple conditions:
@media (min-width: 768px) and (max-width: 1023px) {
/* Styles for screens between 768px and 1023px */
}
@media (min-width: 768px) and (orientation: landscape) {
/* Tablets in landscape mode */
}
All conditions must be true.
OR (Comma)
Use commas for OR logic:
@media (max-width: 767px), (orientation: portrait) {
/* Phones OR anything in portrait mode */
}
If any condition is true, styles apply.
NOT
Negate a condition:
@media not all and (min-width: 768px) {
/* Everything except screens 768px and wider */
}
Less commonly used but available.
Mobile-First vs Desktop-First
Mobile-First Approach
Start with mobile styles, then enhance for larger screens using min-width:
/* Mobile base styles */
.container {
padding: 15px;
font-size: 16px;
}
/* Tablet and up */
@media (min-width: 768px) {
.container {
padding: 30px;
font-size: 18px;
}
}
/* Desktop and up */
@media (min-width: 1024px) {
.container {
padding: 40px;
max-width: 1200px;
margin: 0 auto;
}
}
Benefits:
Desktop-First Approach
Start with desktop styles, then strip away for smaller screens using max-width:
/* Desktop base styles */
.container {
padding: 40px;
max-width: 1200px;
font-size: 18px;
}
/* Tablet and smaller */
@media (max-width: 1023px) {
.container {
padding: 30px;
}
}
/* Mobile */
@media (max-width: 767px) {
.container {
padding: 15px;
font-size: 16px;
}
}
This older approach loads more CSS on mobile, hurting performance. Mobile-first is preferred.
Standard Breakpoints
While breakpoints should be content-based, these standard values work well:
/* Mobile first breakpoints */
/* Small phones: base styles, no media query */
/* Large phones (landscape) */
@media (min-width: 480px) { }
/* Tablets (portrait) */
@media (min-width: 768px) { }
/* Tablets (landscape) and small desktops */
@media (min-width: 1024px) { }
/* Desktops */
@media (min-width: 1200px) { }
/* Large desktops */
@media (min-width: 1440px) { }
Adjust based on your content’s needs.
Practical Examples
Responsive Navigation
/* Mobile: hamburger menu */
.nav-toggle {
display: block;
}
.nav-menu {
display: none;
}
/* Desktop: full navigation */
@media (min-width: 768px) {
.nav-toggle {
display: none;
}
.nav-menu {
display: flex;
}
}
Responsive Grid
/* Mobile: single column */
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
}
/* Tablet: two columns */
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
/* Desktop: three columns */
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
}
Responsive Typography
/* Mobile */
body {
font-size: 16px;
line-height: 1.5;
}
h1 {
font-size: 28px;
margin-bottom: 20px;
}
/* Tablet */
@media (min-width: 768px) {
body {
font-size: 18px;
}
h1 {
font-size: 36px;
}
}
/* Desktop */
@media (min-width: 1024px) {
h1 {
font-size: 48px;
margin-bottom: 30px;
}
}
Hide/Show Elements
.desktop-only {
display: none;
}
@media (min-width: 1024px) {
.mobile-only {
display: none;
}
.desktop-only {
display: block;
}
}
Organizing Media Queries
Component-Based Organization
Group media queries with their components:
/* Button component */
.button {
padding: 10px 20px;
font-size: 14px;
}
@media (min-width: 768px) {
.button {
padding: 12px 30px;
font-size: 16px;
}
}
/* Card component */
.card {
padding: 15px;
}
@media (min-width: 768px) {
.card {
padding: 25px;
}
}
This keeps related styles together, making maintenance easier.
Breakpoint-Based Organization
Group all styles for each breakpoint:
/* Mobile base styles */
.button { padding: 10px 20px; }
.card { padding: 15px; }
/* Tablet breakpoint */
@media (min-width: 768px) {
.button { padding: 12px 30px; }
.card { padding: 25px; }
}
/* Desktop breakpoint */
@media (min-width: 1024px) {
.button { padding: 15px 40px; }
.card { padding: 35px; }
}
This shows how the entire layout changes at each breakpoint.
Both approaches work. Choose based on your project structure.
CSS Custom Properties and Media Queries
Use CSS variables for responsive values:
:root {
--container-padding: 15px;
--font-size-base: 16px;
}
@media (min-width: 768px) {
:root {
--container-padding: 30px;
--font-size-base: 18px;
}
}
.container {
padding: var(--container-padding);
font-size: var(--font-size-base);
}
Change variables at breakpoints and all elements using them update automatically.
Print Media Queries
Optimize layouts for printing:
@media print {
/* Hide navigation, ads, etc */
nav, .ads, footer {
display: none;
}
/* Black text on white background */
body {
color: #000;
background: #fff;
}
/* Remove shadows and unnecessary styles */
* {
box-shadow: none !important;
text-shadow: none !important;
}
/* Add page breaks */
h1, h2 {
page-break-after: avoid;
}
}
This creates a clean, printable version of your content.
Dark Mode Media Query
Detect user’s color scheme preference:
/* Light mode (default) */
body {
background: #fff;
color: #333;
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
body {
background: #1a1a1a;
color: #eee;
}
}
This respects the user’s system dark mode setting.
Reduced Motion
Respect users who prefer reduced motion:
/* Animations for everyone by default */
.element {
transition: all 0.3s ease;
}
/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
This improves accessibility for users with vestibular disorders.
Testing Media Queries
Browser DevTools
Chrome DevTools:
1. Open DevTools (F12)
2. Toggle device toolbar (Ctrl+Shift+M)
3. Resize viewport to test breakpoints
4. Select preset devices or enter custom dimensions
Responsive Design Mode
Firefox has excellent responsive design tools showing which media queries are active.
Real Devices
Always test on actual phones, tablets, and desktops. Emulators approximate but do not perfectly replicate real device behavior.
Common Media Query Mistakes
Too Many Breakpoints
If you have 10+ breakpoints, your design is not flexible enough. Build layouts that work across ranges, not just at specific widths.
Targeting Specific Devices
Do not write media queries for “iPhone 12” or “iPad Air”. Devices change constantly. Write for content needs.
Forgetting Orientation
Tablets rotate between portrait and landscape. Test both orientations at your breakpoints.
Not Testing Between Breakpoints
Your site should look good at 850px, not just at your 768px and 1024px breakpoints. Test throughout the range.
Using Only max-width
Mobile-first with min-width is more performant and maintainable than desktop-first with max-width.
Performance Considerations
Avoid Redundant Media Queries
Do not repeat the same media query throughout your CSS:
/* Inefficient */
.button { }
@media (min-width: 768px) { .button { } }
.card { }
@media (min-width: 768px) { .card { } }
Group them:
/* Better */
.button { }
.card { }
@media (min-width: 768px) {
.button { }
.card { }
}
Use Fewer Breakpoints
Each media query adds complexity. Start with 3-4 major breakpoints and only add more if necessary.
Minimize CSS Inside Media Queries
Only include CSS that actually changes at each breakpoint. Do not duplicate unchanged properties.
Advanced Media Query Features
Container Queries (New)
Container queries let elements respond to their container’s size, not the viewport:
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 1fr 2fr;
}
}
This creates truly modular responsive components. Browser support is growing rapidly.
Range Syntax (New)
Modern browsers support comparison operators:
/* Old way */
@media (min-width: 768px) and (max-width: 1023px) { }
/* New way */
@media (768px <= width < 1024px) { }
Easier to read but check browser support.
Media Queries in JavaScript
Access media query state in JavaScript:
const mediaQuery = window.matchMedia('(min-width: 768px)');
if (mediaQuery.matches) {
console.log('Viewport is at least 768px wide');
}
// Listen for changes
mediaQuery.addEventListener('change', (e) => {
if (e.matches) {
console.log('Viewport is now at least 768px wide');
}
});
Use this for JavaScript that should only run at certain screen sizes.
Best Practices
Start Mobile-First
Write base styles for mobile, then enhance with min-width media queries.
Use Standard Breakpoints
Start with common values (480px, 768px, 1024px, 1200px) and adjust if needed.
Group Related Styles
Organize media queries by component or breakpoint—whichever makes more sense for your project.
Test Thoroughly
Test at breakpoint values and between them. Use real devices when possible.
Use CSS Variables
Change CSS custom properties at breakpoints for easier maintenance.
Minimize Media Query CSS
Only include properties that actually change at each breakpoint.
Consider Orientation
Test portrait and landscape modes, especially on tablets.
Respect User Preferences
Use prefers-color-scheme and prefers-reduced-motion for better accessibility.
Conclusion
Media queries are the foundation of responsive web design. They let you adapt layouts, typography, and styling based on device characteristics.
Use mobile-first media queries with min-width for better performance and maintainability. Start with base mobile styles, then enhance progressively for larger screens.
Common breakpoints around 480px, 768px, 1024px, and 1200px work well, but adjust based on your content’s needs. Aim for 3-5 major breakpoints rather than excessive micro-adjustments.
Organize media queries by component or breakpoint depending on your project structure. Keep related styles together for easier maintenance.
Test thoroughly across different screen sizes, not just at exact breakpoint values. Use browser DevTools and test on real devices.
Modern features like container queries and dark mode detection make media queries even more powerful. Combine them with CSS Grid, Flexbox, and CSS custom properties for flexible responsive designs.
Media queries are essential for creating websites that work beautifully on any device. Master them and you have the core skill for responsive web development.
Frequently Asked Questions
What is the difference between min-width and max-width?
min-width applies styles when the viewport is at least that wide (mobile-first). max-width applies styles when the viewport is at most that wide (desktop-first). Mobile-first with min-width is the modern best practice.
How many breakpoints should I use?
Most websites work well with 3-5 major breakpoints. Start simple and only add more if your content truly needs them. Too many breakpoints indicates inflexible design.
Can I use media queries in JavaScript?
Yes, use window.matchMedia() to check media query state and listen for changes. This lets you run JavaScript code only at certain screen sizes.
Should media queries be at the top or bottom of my CSS?
For mobile-first, media queries come after base styles. For organization, either group them with components or collect them at the end. Both work—choose what makes sense for your project.
Do media queries slow down my website?
No. Modern browsers are highly optimized for media queries. The performance impact is negligible. Focus on reducing overall CSS size rather than worrying about media query count.