Media Queries

Media Queries

Media queries are the heart of responsive web design. They let you write CSS rules that only apply when certain conditions are met — most commonly based on screen width.

Basic Media Query Syntax

@media (max-width: 768px) {
    /* CSS rules here apply only when the
       viewport is 768px wide or narrower */
    .sidebar {
        display: none;
    }
}

max-width vs min-width

Query	Meaning	Approach
max-width: 768px	Applies at 768px and below	Desktop-first — start with desktop styles, override for smaller screens
min-width: 769px	Applies at 769px and above	Mobile-first — start with mobile styles, enhance for larger screens

Desktop-First Example

/* Default: desktop styles */
.grid { display: flex; gap: 20px; }
.card { flex: 1; }

/* Tablet: override for medium screens */
@media (max-width: 768px) {
    .grid { flex-wrap: wrap; }
    .card { flex: 0 0 calc(50% - 10px); }
}

/* Mobile: override for small screens */
@media (max-width: 480px) {
    .card { flex: 0 0 100%; }
}

Mobile-First Example

/* Default: mobile styles (smallest screen) */
.card { width: 100%; margin-bottom: 20px; }

/* Tablet: add multi-column at medium screens */
@media (min-width: 769px) {
    .grid { display: flex; gap: 20px; }
    .card { flex: 0 0 calc(50% - 10px); }
}

/* Desktop: wider layout */
@media (min-width: 1025px) {
    .card { flex: 1; }
}

Which Approach Is Better?

Desktop-First	Mobile-First
Easier if redesigning an existing desktop site	Recommended by Google & industry best practice
Uses max-width	Uses min-width
Overrides are subtractive (hide, simplify)	Additions are progressive (enhance, expand)
Can lead to more CSS overrides	Generally produces cleaner, leaner CSS

Common Breakpoints

/* Extra Small (phones): 0 – 480px */
@media (max-width: 480px) { }

/* Small (large phones): 481px – 768px */
@media (max-width: 768px) { }

/* Medium (tablets): 769px – 1024px */
@media (max-width: 1024px) { }

/* Large (desktops): 1025px + */
/* (default desktop styles, no query needed) */

Combining Conditions

You can combine multiple conditions with and:

/* Only between 481px and 768px */
@media (min-width: 481px) and (max-width: 768px) {
    /* Tablet-specific styles */
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .hero { min-height: 300px; }
}

Available Media Features

Feature	What It Tests
width / max-width / min-width	Viewport width
height / max-height / min-height	Viewport height
orientation	portrait or landscape
prefers-color-scheme	dark or light — for dark mode
prefers-reduced-motion	reduce — user prefers less animation
hover	hover or none — does the device support hover?

Dark Mode Example

/* Light mode (default) */
body { background: #fff; color: #333; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body { background: #1a1a2e; color: #eee; }
    a { color: #7ec8e3; }
}

Where to Place Media Queries

You have two options for organizing media queries:

Option 1: At the bottom of your stylesheet

/* === Base Styles === */
.header { ... }
.nav { ... }
.grid { ... }

/* === Tablet === */
@media (max-width: 768px) { ... }

/* === Mobile === */
@media (max-width: 480px) { ... }

Option 2: Near each component (modular)

/* Header styles */
.header { padding: 20px; }
@media (max-width: 768px) {
    .header { padding: 10px; }
}

/* Grid styles */
.grid { display: flex; }
@media (max-width: 768px) {
    .grid { flex-direction: column; }
}

Key Takeaways

• Media queries apply CSS rules conditionally based on screen size
• max-width = desktop-first; min-width = mobile-first
• Mobile-first is the recommended approach
• Common breakpoints: 480px (mobile), 768px (tablet), 1024px (desktop)
• Use and to combine multiple conditions
• Media queries also support dark mode, orientation, and reduced-motion detection