Media Queries Basics

Media queries are the foundation of responsive web design. They allow you to apply different CSS styles based on device characteristics like screen width, height, orientation, and resolution. With media queries, you can create websites that adapt beautifully to smartphones, tablets, laptops, and desktop monitors—ensuring your content looks great on any device.

What Are Media Queries?

Media queries let you apply CSS rules conditionally based on the device's characteristics. They're the key to making websites responsive to different screen sizes.

Basic Media Query Syntax

basic-syntax.css

/* Basic syntax */
@media media-type and (condition) {
  /* CSS rules */
}

/* Most common: screen width */
@media (max-width: 768px) {
  /* Styles for screens 768px and smaller */
  .container {
    padding: 10px;
  }
}

/* Multiple conditions */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Styles for tablets (768px to 1024px) */
  .container {
    padding: 20px;
  }
}

How They Work: Media queries test for conditions (like screen width). If the condition is true, the CSS inside the query applies. If false, it's ignored. This lets you define different styles for different devices.

Media Query Syntax

Media queries use the @media rule followed by conditions that determine when the styles should apply.

syntax-breakdown.css

/* Complete syntax */
@media media-type and (media-feature) {
  /* CSS rules */
}

/* Media types */
@media screen { }        /* Computer screens, tablets, phones */
@media print { }         /* Print preview and printed pages */
@media all { }           /* All devices (default) */

/* Media features (most common) */
@media (max-width: 768px) { }      /* Maximum width */
@media (min-width: 768px) { }      /* Minimum width */
@media (orientation: portrait) { } /* Portrait orientation */
@media (orientation: landscape) { } /* Landscape orientation */

/* Combining conditions with 'and' */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Styles for tablets */
}

/* Multiple queries with comma (OR) */
@media (max-width: 768px), (orientation: portrait) {
  /* Applies if EITHER condition is true */
}

Media Query Demo (Resize Browser)

Common Breakpoints

Breakpoints are the screen widths where your design changes. While you can set any breakpoint, these are commonly used based on typical device sizes.

Standard Breakpoints

Property	Values	Description
`Mobile (Small)`	`< 576px`	Small phones (portrait)
`Mobile (Large)`	`576px - 767px`	Large phones (portrait)
`Tablet (Portrait)`	`768px - 991px`	Tablets and small laptops
`Tablet (Landscape) / Desktop (Small)`	`992px - 1199px`	Tablets (landscape) and laptops
`Desktop (Large)`	`1200px - 1399px`	Desktops and laptops
`Desktop (Extra Large)`	`≥ 1400px`	Large desktops and monitors

breakpoints.css

/* Mobile-first approach (recommended) */

/* Base styles (mobile) */
.container {
  padding: 15px;
  font-size: 14px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .container {
    padding: 20px;
    font-size: 15px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .container {
    padding: 30px;
    font-size: 16px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .container {
    padding: 40px;
    font-size: 17px;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 50px;
    font-size: 18px;
  }
}

📱 Mobile-First Approach:

Start with mobile styles as your base, then use min-width media queries to progressively enhance for larger screens. This approach is more efficient and aligns with how most users browse the web today.

Width-Based Media Queries

Width-based media queries are the most common. They adapt your layout based on viewport width.

max-width (Desktop-First)

max-width.css

/* Desktop-first approach */

/* Base styles (desktop) */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* Tablets and smaller */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* Tablets (portrait) */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

min-width (Mobile-First)

min-width.css

/* Mobile-first approach (recommended) */

/* Base styles (mobile) */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Tablets (portrait) and up */
@media (min-width: 576px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

/* Tablets (landscape) and up */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
}

Responsive Grid with Breakpoints

Combining Media Query Conditions

You can combine multiple conditions using and, or (comma), and not.

combining.css

/* AND operator - both conditions must be true */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Styles for tablets only */
  .container {
    background: lightblue;
  }
}

/* AND with orientation */
@media (min-width: 768px) and (orientation: landscape) {
  /* Tablets in landscape mode */
  .container {
    background: lightgreen;
  }
}

/* OR operator (comma) - either condition can be true */
@media (max-width: 768px), (orientation: portrait) {
  /* Applies to mobile OR portrait orientation */
  .sidebar {
    display: none;
  }
}

/* NOT operator - inverts the condition */
@media not screen {
  /* Applies to everything except screens */
  .no-print {
    display: none;
  }
}

/* Complex combinations */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* Very specific: tablets in landscape */
  .special-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

Combined Conditions (Rotate/Resize Device)

Orientation Media Queries

Orientation queries detect whether a device is in portrait or landscape mode.

orientation.css

/* Portrait orientation (height > width) */
@media (orientation: portrait) {
  .container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    order: -1; /* Move to top */
  }
}

/* Landscape orientation (width > height) */
@media (orientation: landscape) {
  .container {
    flex-direction: row;
  }
  
  .sidebar {
    width: 250px;
  }
}

/* Combining with width */
@media (max-width: 768px) and (orientation: landscape) {
  /* Mobile devices in landscape */
  .header {
    height: 50px; /* Shorter header for landscape phones */
  }
}

Orientation Detection (Rotate Device)

Print Media Queries

Print media queries apply styles specifically for when a page is printed or in print preview mode.

print.css

/* Print-specific styles */
@media print {
  /* Hide elements that shouldn't be printed */
  .no-print,
  nav,
  .sidebar,
  button,
  .advertisement {
    display: none !important;
  }
  
  /* Optimize for print */
  body {
    font-size: 12pt;
    color: black;
    background: white;
  }
  
  /* Remove backgrounds and shadows */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  /* Show link URLs after links */
  a[href]::after {
    content: " (" attr(href) ")";
  }
  
  /* Page breaks */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  
  img {
    page-break-inside: avoid;
  }
  
  /* Ensure content fits */
  .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }
}

Print Media Query Example

Practical Responsive Examples

Responsive Navigation

Responsive Card Layout

Key Takeaways

@media rule creates conditional CSS based on device characteristics
max-width: Styles apply when viewport is ≤ value (desktop-first)
min-width: Styles apply when viewport is ≥ value (mobile-first)
Mobile-first approach is recommended (start small, scale up)
Common breakpoints: 576px, 768px, 992px, 1200px, 1400px
Combine conditions with and
Use comma for OR logic
orientation: portrait/landscape detects device orientation
@media print for print-specific styles
Hide navigation/sidebars on mobile, show on desktop
Adjust grid columns at different breakpoints
Test responsive designs by resizing browser or using DevTools

What's Next?

Now that you understand media queries and breakpoints, you're ready to learn about Mobile-First Design. In the next lesson, we'll explore the mobile-first vs desktop-first approach in depth, progressive enhancement strategies, and best practices for building responsive websites that prioritize mobile users.

Media queries are the foundation of responsive design, giving you the power to create websites that adapt to any device. Practice building responsive layouts, and you'll develop an intuition for where breakpoints should be based on your content—not just device sizes!

What Are Media Queries?

Media queries let you apply CSS rules conditionally based on the device's characteristics. They're the key to making websites responsive to different screen sizes.

Basic Media Query Syntax

basic-syntax.css

/* Basic syntax */
@media media-type and (condition) {
  /* CSS rules */
}

/* Most common: screen width */
@media (max-width: 768px) {
  /* Styles for screens 768px and smaller */
  .container {
    padding: 10px;
  }
}

/* Multiple conditions */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Styles for tablets (768px to 1024px) */
  .container {
    padding: 20px;
  }
}

Media Query Syntax

Media queries use the @media rule followed by conditions that determine when the styles should apply.

syntax-breakdown.css

/* Complete syntax */
@media media-type and (media-feature) {
  /* CSS rules */
}

/* Media types */
@media screen { }        /* Computer screens, tablets, phones */
@media print { }         /* Print preview and printed pages */
@media all { }           /* All devices (default) */

/* Media features (most common) */
@media (max-width: 768px) { }      /* Maximum width */
@media (min-width: 768px) { }      /* Minimum width */
@media (orientation: portrait) { } /* Portrait orientation */
@media (orientation: landscape) { } /* Landscape orientation */

/* Combining conditions with 'and' */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Styles for tablets */
}

/* Multiple queries with comma (OR) */
@media (max-width: 768px), (orientation: portrait) {
  /* Applies if EITHER condition is true */
}

Media Query Demo (Resize Browser)

Common Breakpoints

Breakpoints are the screen widths where your design changes. While you can set any breakpoint, these are commonly used based on typical device sizes.

Standard Breakpoints

Property	Values	Description
`Mobile (Small)`	`< 576px`	Small phones (portrait)
`Mobile (Large)`	`576px - 767px`	Large phones (portrait)
`Tablet (Portrait)`	`768px - 991px`	Tablets and small laptops
`Tablet (Landscape) / Desktop (Small)`	`992px - 1199px`	Tablets (landscape) and laptops
`Desktop (Large)`	`1200px - 1399px`	Desktops and laptops
`Desktop (Extra Large)`	`≥ 1400px`	Large desktops and monitors

breakpoints.css

/* Mobile-first approach (recommended) */

/* Base styles (mobile) */
.container {
  padding: 15px;
  font-size: 14px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .container {
    padding: 20px;
    font-size: 15px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .container {
    padding: 30px;
    font-size: 16px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .container {
    padding: 40px;
    font-size: 17px;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 50px;
    font-size: 18px;
  }
}

📱 Mobile-First Approach:

Width-Based Media Queries

Width-based media queries are the most common. They adapt your layout based on viewport width.

max-width (Desktop-First)

max-width.css

/* Desktop-first approach */

/* Base styles (desktop) */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* Tablets and smaller */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* Tablets (portrait) */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

min-width (Mobile-First)

min-width.css

/* Mobile-first approach (recommended) */

/* Base styles (mobile) */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Tablets (portrait) and up */
@media (min-width: 576px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

/* Tablets (landscape) and up */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
}

Responsive Grid with Breakpoints

Combining Media Query Conditions

You can combine multiple conditions using and, or (comma), and not.

combining.css

/* AND operator - both conditions must be true */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Styles for tablets only */
  .container {
    background: lightblue;
  }
}

/* AND with orientation */
@media (min-width: 768px) and (orientation: landscape) {
  /* Tablets in landscape mode */
  .container {
    background: lightgreen;
  }
}

/* OR operator (comma) - either condition can be true */
@media (max-width: 768px), (orientation: portrait) {
  /* Applies to mobile OR portrait orientation */
  .sidebar {
    display: none;
  }
}

/* NOT operator - inverts the condition */
@media not screen {
  /* Applies to everything except screens */
  .no-print {
    display: none;
  }
}

/* Complex combinations */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* Very specific: tablets in landscape */
  .special-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

Combined Conditions (Rotate/Resize Device)

Orientation Media Queries

Orientation queries detect whether a device is in portrait or landscape mode.

orientation.css

/* Portrait orientation (height > width) */
@media (orientation: portrait) {
  .container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    order: -1; /* Move to top */
  }
}

/* Landscape orientation (width > height) */
@media (orientation: landscape) {
  .container {
    flex-direction: row;
  }
  
  .sidebar {
    width: 250px;
  }
}

/* Combining with width */
@media (max-width: 768px) and (orientation: landscape) {
  /* Mobile devices in landscape */
  .header {
    height: 50px; /* Shorter header for landscape phones */
  }
}

Orientation Detection (Rotate Device)

Print Media Queries

Print media queries apply styles specifically for when a page is printed or in print preview mode.

print.css

/* Print-specific styles */
@media print {
  /* Hide elements that shouldn't be printed */
  .no-print,
  nav,
  .sidebar,
  button,
  .advertisement {
    display: none !important;
  }
  
  /* Optimize for print */
  body {
    font-size: 12pt;
    color: black;
    background: white;
  }
  
  /* Remove backgrounds and shadows */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  /* Show link URLs after links */
  a[href]::after {
    content: " (" attr(href) ")";
  }
  
  /* Page breaks */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  
  img {
    page-break-inside: avoid;
  }
  
  /* Ensure content fits */
  .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }
}

Print Media Query Example

Practical Responsive Examples

Responsive Navigation

Responsive Card Layout

Key Takeaways

@media rule creates conditional CSS based on device characteristics
max-width: Styles apply when viewport is ≤ value (desktop-first)
min-width: Styles apply when viewport is ≥ value (mobile-first)
Mobile-first approach is recommended (start small, scale up)
Common breakpoints: 576px, 768px, 992px, 1200px, 1400px
Combine conditions with and
Use comma for OR logic
orientation: portrait/landscape detects device orientation
@media print for print-specific styles
Hide navigation/sidebars on mobile, show on desktop
Adjust grid columns at different breakpoints
Test responsive designs by resizing browser or using DevTools

What Are Media Queries?

Basic Media Query Syntax

Media Query Syntax

Media Query Demo (Resize Browser)

Common Breakpoints

Standard Breakpoints

Width-Based Media Queries

max-width (Desktop-First)

min-width (Mobile-First)

Responsive Grid with Breakpoints

Combining Media Query Conditions

Combined Conditions (Rotate/Resize Device)

Orientation Media Queries

Orientation Detection (Rotate Device)

Print Media Queries

Print Media Query Example

Practical Responsive Examples

Responsive Navigation

Responsive Navigation

Responsive Card Layout

Responsive Card Layout

Key Takeaways

What's Next?

Know someone who'd find this guide helpful? Please share!

Never Miss a New CSS Tutorial

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

CSS Tutorials

Media Queries Basics

What Are Media Queries?

Basic Media Query Syntax

Media Query Syntax

Media Query Demo (Resize Browser)

Common Breakpoints

Standard Breakpoints

Width-Based Media Queries

max-width (Desktop-First)

min-width (Mobile-First)

Responsive Grid with Breakpoints

Combining Media Query Conditions

Combined Conditions (Rotate/Resize Device)

Orientation Media Queries

Orientation Detection (Rotate Device)

Print Media Queries

Print Media Query Example

Practical Responsive Examples

Responsive Navigation

Responsive Navigation

Responsive Card Layout

Responsive Card Layout

Key Takeaways

What's Next?

Know someone who'd find this guide helpful? Please share!

Never Miss a New CSS Tutorial

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

CSS Tutorials