CSS Media Queries Guide

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

/* Example */
@media screen and (max-width: 768px) {
  .container {
    padding: 1rem;
  }
}

/* Full syntax */
@media [not|only] media-type [and] (media-feature) {
  /* styles */
}

/* Examples */
@media screen { }
@media print { }
@media screen and (min-width: 768px) { }
@media (max-width: 1200px) { }
@media not print { }
@media only screen and (min-width: 768px) { }

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

/* screen - Computer screens, tablets, phones */
@media screen { }

/* print - Print preview and printed pages */
@media print { }

/* speech - Screen readers */
@media speech { }

/* Note: Most other types are deprecated */

/* Import CSS files conditionally */
@import url('mobile.css') screen and (max-width: 768px);
@import url('print.css') print;

/* Link tag method */

<!-- In HTML -->
<link rel="stylesheet" media="screen and (min-width: 768px)" href="desktop.css">
<link rel="stylesheet" media="print" href="print.css">

/* Mobile styles (default, no media query) */
.container {
  padding: 1rem;
  max-width: 100%;
}

/* Small tablets and large phones (576px and up) */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

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

/* Desktops (992px and up) */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

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

/* Extra large screens (1400px and up) */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

/* Desktop styles (default) */
.container {
  max-width: 1200px;
  padding: 2rem;
}

/* Laptops and smaller (1199px and down) */
@media (max-width: 1199px) {
  .container {
    max-width: 960px;
  }
}

/* Tablets (991px and down) */
@media (max-width: 991px) {
  .container {
    max-width: 720px;
  }
}

/* Large phones (767px and down) */
@media (max-width: 767px) {
  .container {
    max-width: 540px;
    padding: 1rem;
  }
}

/* Small phones (575px and down) */
@media (max-width: 575px) {
  .container {
    max-width: 100%;
    padding: 0.75rem;
  }
}

/* Width */
@media (min-width: 768px) { }
@media (max-width: 1200px) { }
@media (width: 768px) { }

/* Height */
@media (min-height: 600px) { }
@media (max-height: 900px) { }

/* Both */
@media (min-width: 768px) and (min-height: 600px) { }

/* Portrait - height > width */
@media (orientation: portrait) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

/* Landscape - width > height */
@media (orientation: landscape) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Specific aspect ratio */
@media (aspect-ratio: 16/9) { }

/* Minimum aspect ratio */
@media (min-aspect-ratio: 16/9) {
  .video-container {
    /* Widescreen styles */
  }
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 4/3) {
  .video-container {
    /* Narrower screen styles */
  }
}

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

/* High DPI displays (Retina) */
@media (min-resolution: 192dpi) {
  .logo {
    background-image: url('[email protected]');
  }
}

/* Using dppx (dots per pixel) */
@media (min-resolution: 2dppx) {
  /* Retina styles */
}

/* Webkit prefix (older Safari) */
@media (-webkit-min-device-pixel-ratio: 2) {
  /* Retina styles */
}

/* PWA fullscreen mode */
@media (display-mode: fullscreen) {
  .header {
    position: static;
  }
}

/* PWA standalone mode (appears like native app) */
@media (display-mode: standalone) {
  .install-prompt {
    display: none;
  }
}

/* Browser tab */
@media (display-mode: browser) {
  /* Default browser styles */
}

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --text: #ffffff;
  }
}

/* Light mode preference */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --text: #000000;
  }
}

/* Reduced motion (accessibility) */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Reduced transparency */
@media (prefers-reduced-transparency: reduce) {
  .glass-effect {
    backdrop-filter: none;
    background: solid;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .button {
    border: 2px solid currentColor;
  }
}

/* Data saver mode */
@media (prefers-reduced-data: reduce) {
  .hero {
    background-image: none;
  }
}

/* Fine pointer (mouse) */
@media (pointer: fine) {
  .button {
    padding: 0.5rem 1rem;
  }
}

/* Coarse pointer (touch) */
@media (pointer: coarse) {
  .button {
    padding: 1rem 1.5rem; /* Larger touch targets */
    min-height: 44px;
  }
}

/* Hover capability */
@media (hover: hover) {
  .card:hover {
    transform: scale(1.05);
  }
}

/* No hover capability (touch devices) */
@media (hover: none) {
  .card:active {
    transform: scale(0.95);
  }
}

/* Combined - touch device */
@media (hover: none) and (pointer: coarse) {
  /* Optimize for touch */
  .button {
    min-height: 44px;
    padding: 1rem 1.5rem;
  }
}

/* Old syntax */
@media (min-width: 768px) { }
@media (max-width: 1200px) { }

/* New range syntax */
@media (width >= 768px) { }
@media (width <= 1200px) { }

/* All comparison operators */
@media (width > 768px) { }   /* Greater than */
@media (width >= 768px) { }  /* Greater than or equal */
@media (width < 1200px) { }  /* Less than */
@media (width <= 1200px) { } /* Less than or equal */
@media (width = 768px) { }   /* Exactly equal */

/* Between two values (old way) */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Tablet styles */
}

/* Between two values (new way) */
@media (768px <= width <= 1199px) {
  /* Tablet styles */
}

/* More examples */
@media (768px <= width < 1200px) { }
@media (width >= 768px) and (height >= 600px) { }

/* Height ranges */
@media (600px <= height <= 900px) { }

/* Aspect ratio */
@media (aspect-ratio >= 16/9) { }

/* Both conditions must be true */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  /* Applies only to screens between 768px and 1200px */
}

@media (min-width: 768px) and (orientation: landscape) {
  /* Wide screens in landscape */
}

/* Multiple conditions */
@media (min-width: 768px) and (min-height: 600px) and (orientation: landscape) {
  /* All three must be true */
}

/* Any condition can be true */
@media (max-width: 767px), (orientation: portrait) {
  /* Applies to small screens OR portrait orientation */
}

@media screen and (max-width: 768px), print {
  /* Small screens OR print media */
}

/* Multiple OR conditions */
@media (max-width: 480px), (max-height: 480px), (orientation: portrait) {
  /* Any of these three conditions */
}

/* Negate entire query */
@media not print {
  /* Everything except print */
}

@media not screen and (max-width: 768px) {
  /* Not (screen AND max-width: 768px) */
  /* Same as: not screen, or screen wider than 768px */
}

/* Exclude specific conditions */
@media not all and (orientation: landscape) {
  /* Portrait only */
}

/* Hides from older browsers that don't support media queries */
@media only screen and (min-width: 768px) {
  /* Modern browsers only */
}

/* Note: 'only' is rarely needed in modern development */

/* AND + OR */
@media (min-width: 768px) and (max-width: 1200px),
       (min-width: 1400px) {
  /* Applies to: 768-1200px OR 1400px+ */
}

/* Multiple conditions with OR */
@media screen and (max-width: 768px) and (orientation: portrait),
       screen and (max-height: 500px) {
  /* Small portrait screens OR very short screens */
}

/* Targeting specific devices */
@media screen 
  and (min-width: 768px) 
  and (max-width: 1024px)
  and (orientation: portrait)
  and (hover: none) {
  /* Likely an iPad in portrait mode */
}

/* Fluid typography with breakpoints */
body {
  font-size: 16px;
}

@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

@media (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}

/* Or use clamp for fluid scaling */
body {
  font-size: clamp(16px, 2vw, 20px);
}

/* Responsive headings */
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.2;
}

@media (max-width: 767px) {
  h1 {
    line-height: 1.3; /* More spacing on mobile */
  }
}

/* Mobile-first grid */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

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

@media (min-width: 992px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

@media (min-width: 1400px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Mobile navigation */
.nav {
  display: flex;
  flex-direction: column;
}

.menu-toggle {
  display: block;
}

.nav-menu {
  display: none;
}

.nav-menu.is-open {
  display: flex;
  flex-direction: column;
}

/* Desktop navigation */
@media (min-width: 768px) {
  .nav {
    flex-direction: row;
    align-items: center;
  }

  .menu-toggle {
    display: none;
  }

  .nav-menu {
    display: flex;
    flex-direction: row;
    gap: 2rem;
  }
}

/* Sidebar layout that adapts */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .layout.has-sidebar {
    grid-template-columns: 250px 1fr;
  }
}

@media (min-width: 1200px) {
  .layout.has-sidebar {
    grid-template-columns: 300px 1fr;
  }
}

/* Optimize for printing */
@media print {
  /* Hide unnecessary elements */
  .no-print,
  nav,
  footer,
  .sidebar,
  .ads {
    display: none !important;
  }

  /* Reset colors for print */
  * {
    background: white !important;
    color: black !important;
  }

  /* Expand links */
  a[href]::after {
    content: " (" attr(href) ")";
  }

  /* Page breaks */
  h1, h2, h3 {
    page-break-after: avoid;
  }

  img {
    page-break-inside: avoid;
    max-width: 100%;
  }

  /* Show URLs for links */
  @page {
    margin: 2cm;
  }
}

/* Default light theme */
:root {
  --bg: #ffffff;
  --text: #000000;
  --border: #e0e0e0;
}

/* Respect system preference */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --text: #ffffff;
    --border: #333333;
  }
}

/* Manual override with class */
.dark-theme {
  --bg: #1a1a1a;
  --text: #ffffff;
  --border: #333333;
}

/* Only apply dark mode if user hasn't set preference */
@media (prefers-color-scheme: dark) {
  :root:not(.light-theme) {
    --bg: #1a1a1a;
    --text: #ffffff;
  }
}

/* Basic responsive image */
img {
  max-width: 100%;
  height: auto;
}

/* High DPI images */
.logo {
  background-image: url('logo.png');
}

@media (min-resolution: 2dppx) {
  .logo {
    background-image: url('[email protected]');
    background-size: 200px 100px;
  }
}

/* Different images for different sizes */
.hero {
  background-image: url('hero-mobile.jpg');
}

@media (min-width: 768px) {
  .hero {
    background-image: url('hero-tablet.jpg');
  }
}

@media (min-width: 1200px) {
  .hero {
    background-image: url('hero-desktop.jpg');
  }
}

/* Default (desktop) */
.button {
  padding: 0.5rem 1rem;
  min-height: 32px;
}

/* Touch devices - larger targets */
@media (pointer: coarse) {
  .button {
    padding: 0.75rem 1.5rem;
    min-height: 44px; /* Apple's recommendation */
  }

  .interactive-element {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Hover effects only on devices that support hover */
@media (hover: hover) {
  .button:hover {
    background: var(--hover-bg);
  }
}

/* Active states for touch */
@media (hover: none) {
  .button:active {
    transform: scale(0.95);
  }
}

/* ✅ Good: Mobile-first */
.element {
  /* Mobile styles (default) */
  font-size: 1rem;
  padding: 1rem;
}

@media (min-width: 768px) {
  .element {
    /* Tablet and up */
    font-size: 1.125rem;
    padding: 1.5rem;
  }
}

/* ❌ Bad: Desktop-first (requires more overrides) */
.element {
  font-size: 1.5rem;
  padding: 3rem;
}

@media (max-width: 767px) {
  .element {
    font-size: 1rem;
    padding: 1rem;
  }
}

/* ✅ Good: em/rem units respect user preferences */
@media (min-width: 48em) { /* 768px if base is 16px */
  .container {
    max-width: 60rem;
  }
}

/* ❌ Bad: Fixed pixels don't scale with user settings */
@media (min-width: 768px) {
  .container {
    max-width: 960px;
  }
}

/* Option 1: Component-based (Recommended) */
.card {
  padding: 1rem;
}

@media (min-width: 768px) {
  .card {
    padding: 1.5rem;
  }
}

.card-title {
  font-size: 1.25rem;
}

@media (min-width: 768px) {
  .card-title {
    font-size: 1.5rem;
  }
}

/* Option 2: Grouped by breakpoint */
/* Mobile styles */
.card { padding: 1rem; }
.card-title { font-size: 1.25rem; }

/* Tablet and up */
@media (min-width: 768px) {
  .card { padding: 1.5rem; }
  .card-title { font-size: 1.5rem; }
}

/* Define breakpoints as variables */
:root {
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

/* Then reference in media queries */
@media (min-width: 768px) { /* Or use preprocessor variables */
  .element {
    /* styles */
  }
}

/* Adjust spacing with custom properties */
:root {
  --spacing: 1rem;
}

@media (min-width: 768px) {
  :root {
    --spacing: 1.5rem;
  }
}

.element {
  padding: var(--spacing);
}

/* Always include reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Support user's color scheme preference */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* Dark theme variables */
  }
}

/* High contrast support */
@media (prefers-contrast: high) {
  .button {
    border: 2px solid currentColor;
  }
}

/* Load critical CSS first, others with media queries */
/*  */
/*  */

/* Reduce image loading on slow connections */
@media (prefers-reduced-data: reduce) {
  .hero-image {
    background-image: none;
  }
  
  img {
    /* Could use lower resolution images */
  }
}

/* Avoid expensive operations on mobile */
@media (max-width: 767px) {
  .fancy-effect {
    backdrop-filter: none; /* Can be slow on mobile */
    box-shadow: none; /* Simpler is faster */
  }
}

/* Establish a consistent system */
/* xs: 0-575px (mobile) - no media query needed */
/* sm: 576px+ (large phone) */
/* md: 768px+ (tablet) */
/* lg: 992px+ (desktop) */
/* xl: 1200px+ (large desktop) */
/* xxl: 1400px+ (extra large) */

/* Stick to your system throughout the project */
@media (min-width: 576px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 992px) { /* lg */ }
@media (min-width: 1200px) { /* xl */ }
@media (min-width: 1400px) { /* xxl */ }