Media Query Details

The @media rule allows us to define additional CSS to apply based on a condition or a set of conditions.

The @media at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

Media Types

The media condition may start with a media type and an option to indicate if this is only for this type or all other types (not).

The types are:

Examples

@media print {
  body {
    font-size: 10pt;
  }
}
@media screen {
  body {
    font-size: 13px;
  }
}
@media screen, print {
  body {
    line-height: 1.2;
  }
}

Media Features

The remaining portion of the condition concerns the media features. Primarily we work with device width, but several other features are useful.

There are even more features to use. This article has a good list of other, less frequently used, available features. It will also indicate if these features are widely supported yet.

examples

/* When the screen is wider than 900px */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}
/* When the screen resolution is 150 dots-per-inch */
@media screen and (resolution: 150dpi) {
  article {
    body {
      line-height: 1.4;
    }
  }
}

What are good break points for various devices?

In the olden days of the internet, we would create different pages for specific devices. Today we create one site with variations of formatting via CSS and media queries. So thus, we need to know a good set of pixel sizes to use for our media queries.

We'd like to have a definitive set of media queries to cover all devices. Unfortunately, this is a tall order when the best we can do is general guidance for a set of best practices list of media queries.

Thankfully the fine folks at CSS Tricks have a great list of Media Queries for Standard Devices that makes a great starting point for our @media needs.