Media Queries

Media queries are a feature of CSS that enable webpage content to adapt to different screen sizes and resolutions. They are a fundamental part of responsive web design and are used to customize the appearance of websites for multiple devices.

Media queries may be inserted within a webpage's HTML or included in a separate .CSS file referenced by the webpage. Below is an example of a simple media query:

@media screen and (max-width: 768px)
{
  header { height: 70px; }
  article { font-size: 14px; }
  img { max-width: 480px; }
}

The media query above activates if a user's browser window is 768 pixels wide or less. This could happen if you shrink your window on a desktop computer or if you are using a mobile device, such as a tablet, to view the webpage.

In responsive web design, media queries act as filters for different screen sizes. Like all modules within a cascading style sheet, the ones that appear further down the list override the ones above them. Therefore, the default styles are typically defined first within a CSS document, followed by the media queries for different screen sizes. For example, the desktop styles might be defined first, followed by a media query with styles for tablet users, followed by a media query designed for smartphone users. Styles may also be defined in the opposite order, which is considered "mobile first" development.

While min-width is by far the most common feature used in media queries, many others are available as well. Examples include min-device-width, min-device-height, aspect-ratio, max-color-index, max-resolution, orientation, and resolution. The resolution value, for instance, may be used to detect HiDPI displays (such as retina displays) and load high-resolution graphics instead of standard images.