Tutorial

CSS Media Queries: Quick Reference & Guide

Published on June 7, 2018
Default avatar

By Alligator.io

CSS Media Queries: Quick Reference & Guide

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Media queries give us a very powerful way to adjust our styles according to factors like the type of device used, the viewport size, the screen’s pixel density, or even the device orientation. As media queries have been around for quite a while, you may already be familiar with the basic syntax and usage. This post therefore aims to be a good quick reference point, and hopefully you’ll also discover a few tricks you didn’t know were possible.

Basic Media Queries

Media queries are defined using the @media at-rule followed by a media type, 0 or more media features or both a media type and media feature(s). The available media types are all, print, screen and speech, and when not specified the type of all is implied. Multiple media types can be used at once and they should be separated by commas:

@media screen, print {
  /* Styles for screen and print devices */
}

Media types such as tv or projection have been deprecated with Media Queries level 4.

As for media features, they are defined in parentheses and a vast array of features can be tested. Some of the most popular features are width, height, aspect-ratio, orientation and resolution. Many of these popular features are range features so they also have a min and max version available (eg.: min-width, max-width, min-aspect-ratio, max-aspect-ratio,…)

In the following simple example, the default background color is hotpink, but screen devices with a viewport width that’s 650px or less will have a background color of rebeccapurple instead:

body {
  background: hotpink;
}

@media screen and (max-width: 650px) {
  body {
    background: rebeccapurple;
  }
}

Notice how, when specifying both a media type and a media feature, we need to use the and logical operator between them.


Here are a few more examples of simple media queries that specify either a media type, a media feature or both:

@media print {
  /* styles for print media only */
}

@media (max-width: 65rem) {
  /* styles for any device that has a display width of 65rem or less */
}

@media screen and (min-width: 800px) {
  /* styles for screen viewports that have a width of 800px or more */
}

Multiple Media Features

You can specify multiple media feature requirements to satisfy the media query using the and logical operator between features. When using and, the query will match only if all the features evaluate to true. For example, it’s very common to have layouts that adjust to a few different ranges of viewport widths:

/* Extra-small */
@media screen and (max-width: 360px) {
  /* ... */
}

/* Small */
@media screen and (min-width: 361px) and (max-width: 480px) {
  /* ... */
}

/* Medium-only */
@media screen and (min-width: 481px) and (max-width: 960px) {
  /* ... */
}

/* ... */

Or Logical Operator Using Commas

You can define multiple queries separated by commas, in which case the commas act as logical or operators and the query becomes a list of queries. The media query will apply if any of the comma separated queries matches.

In the following example, the media query will be true if the device has an orientation of portrait or if the device’s viewport has a min-width of 3rem and a max-aspect-ratio of 2/1:

@media (orientation: portrait), (min-width: 3rem) and (max-aspect-ratio: 2/1) {
  /* ... */
}

Not Logical Operator

You can use the not logical operator at the beginning of a query to toggle the truthiness of the whole query. The not operator is useful to apply styles when certain conditions are not met by the browser or device. In the following example, the media query will apply when the primary pointing device can’t hover on elements:

@media not screen and (hover: hover) {
  /* ... */
}

Note that with not the media type is not optional. Also, not doesn’t negate an entire query list (queries separated with commas), but only one query.

Only Logical Operator

The only logical operator is a little bit special and hides the entire query for older browsers. In other words, older browsers don’t understand the only keyword so the entire media query is ignored. Otherwise only has not effect:

@media only all and (min-width: 320px) and (max-width: 480px) {
  /* ignored by older browsers */
}

As with the not operator, the media type is not optional when using only. Note that legacy browsers that don’t support Media Queries level 3 are rare now so in most cases the use of only is unnecessary.

Additions from Media Queries Level 4

The latest edition of the media query spec (level 4) specifies quite a few new media features that can be tested:

  • pointer: If there’s a primary pointing device (none, coarse or fine).
  • any-pointer: If there’s any pointing device available (none, coarse or fine).
  • hover: Can the primary pointing device hover on elements (none or hover).
  • any-hover: Can any of the available pointing devices hover on elements (none or hover).
  • color-gamut: The range of available colors (srgb, p3 or rec2020).
  • overflow-inline: How potential overflow on the inline axis is treated (none, paged, optional-paged or scroll).
  • overflow-block: How potential overflow on the block axis is treated (none, paged, optional-paged or scroll).
  • update: At which frequency the layout can be updated (none, slow or fast).

Media Queries for Retina Displays

Over the last few years we’ve started to see a proliferation of devices with displays that have a higher pixel density. It can be useful to style certain aspects of your designs differently for devices with these higher pixel densities. A good example would be providing high-resolution version of certain graphics.

We can accomplish this using the min-resolution media feature with a value of 192dpi. However, the resolution feature is not necessarily supported across all browsers and for a more foolproof approach we can also add an additional non-standard -webkit-min-device-pixel-ratio feature with a value of 2:

@media screen and
  (min-resolution: 192dpi),
  (-webkit-min-device-pixel-ratio: 2) {
    /* ... */
}

You can track the current browser support for the resolution media feature on Can I Use.

Resources

Below are a few very useful media query-related resources:

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Alligator.io

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel