Media Query

A CSS technique that allows you to apply styles conditionally based on device characteristics like screen width, height, orientation, or resolution.

Overview

Media queries are a cornerstone of responsive web design. They enable you to create different layouts and styles for different devices and screen sizes, ensuring your website looks great on mobile phones, tablets, and desktop computers.

Example

css
/* Mobile-first approach */
.container {
  padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Key Points

  • Test device features like width, height, orientation
  • Essential for responsive design
  • Common breakpoints: 640px, 768px, 1024px, 1280px
  • Can combine multiple conditions with 'and'
  • Mobile-first approach recommended

Learn More