CSS Media Queries

Master CSS media queries to create responsive designs that adapt to different screen sizes, devices, and user preferences.

Media queries are a cornerstone of responsive web design, allowing you to apply different styles based on device characteristics like screen size, orientation, and resolution.

What are Media Queries?

Media queries let you apply CSS styles conditionally based on:

Screen width and height
Device orientation
Screen resolution
Color capabilities
User preferences (dark mode, reduced motion)

Basic Syntax

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

Common Breakpoints

/* Mobile First Approach (recommended) */

/* Mobile devices (default - no media query needed) */
.container {
  width: 100%;
  padding: 10px;
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
  .container {
    width: 750px;
    padding: 20px;
  }
}

/* Laptops/Desktops (1024px and up) */
@media (min-width: 1024px) {
  .container {
    width: 1000px;
  }
}

/* Large Desktops (1200px and up) */
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

Media Types

/* All devices (default) */
@media all {
  /* Styles */
}

/* Screen devices */
@media screen {
  /* Styles for screens */
}

/* Print */
@media print {
  /* Styles for printing */
}

/* Speech synthesizers */
@media speech {
  /* Styles for screen readers */
}

Width and Height Queries

/* Minimum width */
@media (min-width: 768px) {
  /* Applies when viewport is 768px or wider */
}

/* Maximum width */
@media (max-width: 767px) {
  /* Applies when viewport is 767px or narrower */
}

/* Width range */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Applies between 768px and 1023px */
}

/* Height queries */
@media (min-height: 600px) {
  /* Applies when viewport is 600px tall or more */
}

Orientation

/* Portrait (height > width) */
@media (orientation: portrait) {
  /* Mobile portrait mode */
}

/* Landscape (width > height) */
@media (orientation: landscape) {
  /* Mobile landscape or desktop */
}

Resolution

/* Standard resolution */
@media (min-resolution: 96dpi) {
  /* Standard screens */
}

/* High resolution (Retina displays) */
@media (min-resolution: 192dpi),
       (-webkit-min-device-pixel-ratio: 2) {
  /* Retina/HiDPI screens */
  .logo {
    background-image: url('logo@2x.png');
  }
}

Logical Operators

AND

/* Combine multiple conditions */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablets only */
}

@media screen and (min-width: 768px) {
  /* Screens 768px and wider */
}

OR (Comma)

/* Multiple conditions */
@media (max-width: 767px), (orientation: portrait) {
  /* Mobile or any portrait mode */
}

NOT

/* Exclude conditions */
@media not screen and (min-width: 768px) {
  /* Everything except screens 768px+ */
}

Practical Examples

<!DOCTYPE html>
<html>
<head>
<style>
  /* Mobile: Hamburger menu */
  .nav {
    display: flex;
    flex-direction: column;
  }
  
  .nav-toggle {
    display: block;
  }
  
  .nav-menu {
    display: none;
  }
  
  .nav-menu.open {
    display: flex;
    flex-direction: column;
  }
  
  /* Desktop: Horizontal menu */
  @media (min-width: 768px) {
    .nav {
      flex-direction: row;
      justify-content: space-between;
    }
    
    .nav-toggle {
      display: none;
    }
    
    .nav-menu {
      display: flex;
      flex-direction: row;
      gap: 20px;
    }
  }
</style>
</head>
<body>
  <nav class="nav">
    <button class="nav-toggle">☰</button>
    <ul class="nav-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

Responsive Grid

.grid {
  display: grid;
  gap: 20px;
}

/* Mobile: 1 column */
.grid {
  grid-template-columns: 1fr;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Large Desktop: 4 columns */
@media (min-width: 1200px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

Responsive Typography

/* Mobile */
body {
  font-size: 16px;
  line-height: 1.5;
}

h1 {
  font-size: 2rem;
}

/* Tablet */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2.5rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
  
  h1 {
    font-size: 3rem;
  }
}

Hide/Show Elements

/* Mobile: Hide sidebar */
.sidebar {
  display: none;
}

.main {
  width: 100%;
}

/* Desktop: Show sidebar */
@media (min-width: 1024px) {
  .sidebar {
    display: block;
    width: 250px;
  }
  
  .main {
    width: calc(100% - 250px);
  }
}

Modern Media Features

Prefers Color Scheme (Dark Mode)

/* Light mode (default) */
body {
  background-color: white;
  color: black;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: white;
  }
}

Prefers Reduced Motion

/* Default animations */
.box {
  transition: transform 0.3s ease;
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Hover Capability

/* Devices that can't hover (touch devices) */
@media (hover: none) {
  .button {
    /* Don't rely on hover effects */
  }
}

/* Devices that can hover */
@media (hover: hover) {
  .button:hover {
    background-color: #3498db;
  }
}

Common Breakpoint System

/* Variables for consistency */
:root {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* Mobile First */
/* xs: 0px+ (default) */

/* sm: 640px+ */
@media (min-width: 640px) {
  /* Small devices */
}

/* md: 768px+ */
@media (min-width: 768px) {
  /* Medium devices */
}

/* lg: 1024px+ */
@media (min-width: 1024px) {
  /* Large devices */
}

/* xl: 1280px+ */
@media (min-width: 1280px) {
  /* Extra large devices */
}

/* 2xl: 1536px+ */
@media (min-width: 1536px) {
  /* 2X Extra large devices */
}

Print Styles

@media print {
  /* Hide unnecessary elements */
  nav, footer, .sidebar, .ads {
    display: none;
  }
  
  /* Adjust layout */
  body {
    font-size: 12pt;
    color: black;
    background: white;
  }
  
  /* Show URLs for links */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  
  /* Page breaks */
  h1, h2, h3 {
    page-break-after: avoid;
  }
}

Container Queries (Modern)

/* Container query (newer feature) */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

Best Practices

Media Query Best Practices

Mobile First: Start with mobile styles, add complexity with min-width
Use relative units: Prefer em/rem over px for better scaling
Test on real devices: Simulators don't always match reality
Consider content: Let content determine breakpoints, not devices
Limit breakpoints: Too many become hard to maintain
Group related queries: Keep media queries near related styles
Use logical breakpoints: Based on content layout, not device sizes
Accessibility: Test with different zoom levels and font sizes
Performance: Minimize redundant styles across breakpoints

Testing Responsive Designs

Browser DevTools: Use device emulation
Resize browser: Test at various widths
Real devices: Test on actual phones/tablets
Online tools: Use responsive testing services
Accessibility: Test with zoom, screen readers

Common Patterns

Stacking on Mobile

.layout {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .layout {
    flex-direction: row;
  }
}

Adjusting Spacing

.section {
  padding: 20px 10px;
}

@media (min-width: 768px) {
  .section {
    padding: 40px 20px;
  }
}

@media (min-width: 1024px) {
  .section {
    padding: 60px 40px;
  }
}

Fluid Typography

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  /* Min 2rem, preferred 5vw, max 4rem */
}

Media queries are essential for creating responsive, accessible websites that work beautifully across all devices!

Media queries are a cornerstone of responsive web design, allowing you to apply different styles based on device characteristics like screen size, orientation, and resolution.

What are Media Queries?

Media queries let you apply CSS styles conditionally based on:

Screen width and height
Device orientation
Screen resolution
Color capabilities
User preferences (dark mode, reduced motion)

Basic Syntax

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

Common Breakpoints

/* Mobile First Approach (recommended) */

/* Mobile devices (default - no media query needed) */
.container {
  width: 100%;
  padding: 10px;
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
  .container {
    width: 750px;
    padding: 20px;
  }
}

/* Laptops/Desktops (1024px and up) */
@media (min-width: 1024px) {
  .container {
    width: 1000px;
  }
}

/* Large Desktops (1200px and up) */
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

Media Types

/* All devices (default) */
@media all {
  /* Styles */
}

/* Screen devices */
@media screen {
  /* Styles for screens */
}

/* Print */
@media print {
  /* Styles for printing */
}

/* Speech synthesizers */
@media speech {
  /* Styles for screen readers */
}

Width and Height Queries

/* Minimum width */
@media (min-width: 768px) {
  /* Applies when viewport is 768px or wider */
}

/* Maximum width */
@media (max-width: 767px) {
  /* Applies when viewport is 767px or narrower */
}

/* Width range */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Applies between 768px and 1023px */
}

/* Height queries */
@media (min-height: 600px) {
  /* Applies when viewport is 600px tall or more */
}

Orientation

/* Portrait (height > width) */
@media (orientation: portrait) {
  /* Mobile portrait mode */
}

/* Landscape (width > height) */
@media (orientation: landscape) {
  /* Mobile landscape or desktop */
}

Resolution

/* Standard resolution */
@media (min-resolution: 96dpi) {
  /* Standard screens */
}

/* High resolution (Retina displays) */
@media (min-resolution: 192dpi),
       (-webkit-min-device-pixel-ratio: 2) {
  /* Retina/HiDPI screens */
  .logo {
    background-image: url('logo@2x.png');
  }
}

Logical Operators

AND

/* Combine multiple conditions */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablets only */
}

@media screen and (min-width: 768px) {
  /* Screens 768px and wider */
}

OR (Comma)

/* Multiple conditions */
@media (max-width: 767px), (orientation: portrait) {
  /* Mobile or any portrait mode */
}

NOT

/* Exclude conditions */
@media not screen and (min-width: 768px) {
  /* Everything except screens 768px+ */
}

Practical Examples

<!DOCTYPE html>
<html>
<head>
<style>
  /* Mobile: Hamburger menu */
  .nav {
    display: flex;
    flex-direction: column;
  }
  
  .nav-toggle {
    display: block;
  }
  
  .nav-menu {
    display: none;
  }
  
  .nav-menu.open {
    display: flex;
    flex-direction: column;
  }
  
  /* Desktop: Horizontal menu */
  @media (min-width: 768px) {
    .nav {
      flex-direction: row;
      justify-content: space-between;
    }
    
    .nav-toggle {
      display: none;
    }
    
    .nav-menu {
      display: flex;
      flex-direction: row;
      gap: 20px;
    }
  }
</style>
</head>
<body>
  <nav class="nav">
    <button class="nav-toggle">☰</button>
    <ul class="nav-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

Responsive Grid

.grid {
  display: grid;
  gap: 20px;
}

/* Mobile: 1 column */
.grid {
  grid-template-columns: 1fr;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Large Desktop: 4 columns */
@media (min-width: 1200px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

Responsive Typography

/* Mobile */
body {
  font-size: 16px;
  line-height: 1.5;
}

h1 {
  font-size: 2rem;
}

/* Tablet */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2.5rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
  
  h1 {
    font-size: 3rem;
  }
}

Hide/Show Elements

/* Mobile: Hide sidebar */
.sidebar {
  display: none;
}

.main {
  width: 100%;
}

/* Desktop: Show sidebar */
@media (min-width: 1024px) {
  .sidebar {
    display: block;
    width: 250px;
  }
  
  .main {
    width: calc(100% - 250px);
  }
}

Modern Media Features

Prefers Color Scheme (Dark Mode)

/* Light mode (default) */
body {
  background-color: white;
  color: black;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: white;
  }
}

Prefers Reduced Motion

/* Default animations */
.box {
  transition: transform 0.3s ease;
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Hover Capability

/* Devices that can't hover (touch devices) */
@media (hover: none) {
  .button {
    /* Don't rely on hover effects */
  }
}

/* Devices that can hover */
@media (hover: hover) {
  .button:hover {
    background-color: #3498db;
  }
}

Common Breakpoint System

/* Variables for consistency */
:root {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* Mobile First */
/* xs: 0px+ (default) */

/* sm: 640px+ */
@media (min-width: 640px) {
  /* Small devices */
}

/* md: 768px+ */
@media (min-width: 768px) {
  /* Medium devices */
}

/* lg: 1024px+ */
@media (min-width: 1024px) {
  /* Large devices */
}

/* xl: 1280px+ */
@media (min-width: 1280px) {
  /* Extra large devices */
}

/* 2xl: 1536px+ */
@media (min-width: 1536px) {
  /* 2X Extra large devices */
}

Print Styles

@media print {
  /* Hide unnecessary elements */
  nav, footer, .sidebar, .ads {
    display: none;
  }
  
  /* Adjust layout */
  body {
    font-size: 12pt;
    color: black;
    background: white;
  }
  
  /* Show URLs for links */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  
  /* Page breaks */
  h1, h2, h3 {
    page-break-after: avoid;
  }
}

Container Queries (Modern)

/* Container query (newer feature) */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

Best Practices

Media Query Best Practices

Mobile First: Start with mobile styles, add complexity with min-width
Use relative units: Prefer em/rem over px for better scaling
Test on real devices: Simulators don't always match reality
Consider content: Let content determine breakpoints, not devices
Limit breakpoints: Too many become hard to maintain
Group related queries: Keep media queries near related styles
Use logical breakpoints: Based on content layout, not device sizes
Accessibility: Test with different zoom levels and font sizes
Performance: Minimize redundant styles across breakpoints

Testing Responsive Designs

Browser DevTools: Use device emulation
Resize browser: Test at various widths
Real devices: Test on actual phones/tablets
Online tools: Use responsive testing services
Accessibility: Test with zoom, screen readers

Common Patterns

Stacking on Mobile

.layout {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .layout {
    flex-direction: row;
  }
}

Adjusting Spacing

.section {
  padding: 20px 10px;
}

@media (min-width: 768px) {
  .section {
    padding: 40px 20px;
  }
}

@media (min-width: 1024px) {
  .section {
    padding: 60px 40px;
  }
}

Fluid Typography

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  /* Min 2rem, preferred 5vw, max 4rem */
}

Media queries are essential for creating responsive, accessible websites that work beautifully across all devices!

CSS Media Queries

On this page

CSS Media Queries

On this page