What are media queries and how are they used?

CSS Media Queries are a powerful feature in Cascading Style Sheets (CSS) that allow web developers to apply different styles based on various characteristics of the device being used to view the webpage. This is fundamental for creating responsive web designs that adapt gracefully across a wide range of devices, from desktops to tablets and mobile phones.

What are Media Queries?

At their core, media queries consist of a media type (e.g., screen, print) and zero or more expressions that check for specific media features (e.g., width, height, orientation, resolution). If the media type matches the device the document is being displayed on, and all expressions in the media query are true, then the associated CSS rules are applied. This enables designers to tailor the user experience based on the user's viewing environment.

How are Media Queries Used?

Media queries are used primarily to implement responsive web design. They allow developers to create a single codebase that can deliver optimized layouts and styles for different screen sizes, resolutions, and even interaction methods. This eliminates the need for separate mobile and desktop websites, simplifying maintenance and improving user experience.

Basic Syntax

A media query starts with the @media at-rule, followed by the media type and optional media features wrapped in parentheses. Multiple features can be combined using logical operators.

@media screen and (min-width: 768px) {
  /* CSS rules for screens wider than or equal to 768px */
  body {
    background-color: lightblue;
  }

  .container {
    max-width: 960px;
  }
}

Common Media Features

Here are some of the most frequently used media features:

• min-width / max-width: Applies styles when the viewport width is above/below a certain threshold.
• min-height / max-height: Applies styles when the viewport height is above/below a certain threshold.
• orientation: Checks if the device is in landscape or portrait mode.
• resolution: Targets devices based on their pixel density (e.g., for Retina displays).
• prefers-color-scheme: Adapts styles based on the user's preferred color scheme (e.g., dark mode).
• print: Specific styles for printing documents.

Logical Operators

Media queries support several logical operators to combine or negate conditions:

• and: Combines multiple media features or types. All conditions must be true.
• or (comma-separated list): Applies styles if any of the comma-separated queries are true.
• not: Negates an entire media query, making it true if the condition is false.
• only: Prevents older browsers that don't support media queries from applying the styles.

/* Example using 'and' and 'orientation' */
@media screen and (min-width: 600px) and (orientation: landscape) {
  .sidebar {
    width: 30%;
    float: left;
  }
}

/* Example using 'or' (comma-separated) */
@media screen and (max-width: 480px), print {
  body {
    font-size: 14px;
  }
}

/* Example using 'not' */
@media not screen and (color) {
  /* Styles for non-color screen devices */
  body {
    background-color: black;
    color: white;
  }
}

Common Breakpoints

While there are no universal standard breakpoints, common practices often involve targeting devices with typical screen widths:

• Extra Small Devices (Phones): max-width: 575.98px
• Small Devices (Tablets): min-width: 576px and max-width: 767.98px
• Medium Devices (Desktops): min-width: 768px and max-width: 991.98px
• Large Devices (Larger Desktops): min-width: 992px and max-width: 1199.98px
• Extra Large Devices (Widescreen): min-width: 1200px

It's generally recommended to use a "mobile-first" approach, styling for the smallest screens first and then adding media queries to progressively enhance the layout for larger screens.