Useful CSS Media Query Features

A typical media query consists of a media type (screen, print, speech, etc) and one or more expressions, involving media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true. The corresponding styles are applied, when the media query result is true.

Note: If no media type is specified the default is all type, i.e the corresponding styles will be applicable for all devices.

Media features

Media features describe specific characteristics of the user agent and the device the document is being displayed on. These are optional.

Here are a few useful media features that I’ve come across-

1. Aspect Ratio

Aspect ratio is the width to height ratio of the viewport.

/* Exact aspect ratio */
@media (aspect-ratio: 2/1) {
    ...
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 16/9) {
 ...
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 8/5) {
    ...
}

Here’s a practical example using aspect ratio -

img {
    display: block;
    margin: auto;
    width: 100vw;
    height: calc((9/16)*100vw);
}

@media (min-aspect-ratio: 16/9) {
    img {
        height: 100vh;
        width: calc((16/9)*100vh);
    }
}

Check out the working demo. Increase/decrease the height of the window to see it in effect.

2. Orientation

There are two orientation values-

• portrait: The viewport is in a portrait orientation, i.e., the height is greater than or equal to the width.
• landscape: The viewport is in a landscape orientation, i.e., the width is greater than the height.

@media (orientation: landscape) {
    /* landscape styles */
}

@media (orientation: portrait) {
    /* portrait styles */
}

This media feature helps in responsive design. We can use it with other media features such as width and height.

@media screen and (min-height: 640px) and (orientation: portrait) { 
    ...
}

3. display-mode

The display-mode is used to test the display mode of an application. There are 4 types according to the spec. It is a part of Web App Manifest specification. The feature query will apply irrespective of whether a web app manifest is present or not.

Check out this article for a practical usage of this- Making Fullscreen Experiences

4. hover, any-hover and any-pointer

hover: The hover CSS media feature can be used to test whether the user’s primary input mechanism can hover over elements.

I’ve found it useful to use this feature to avoid cases in which touch devices emulate hover states on long tap of hoverable elements.

@media (hover: hover) {
  a:hover {
    background: blue;
  }
}

any-hover: This checks whether any available input can hover over elements.

any-pointer: This checks whether the user has any pointing device (mouse, stylus), if so then how accurate it is. Accuracy is measured with - fine, coarse, none

A really great article on this topic - Touch Devices Should Not Be Judged By Their Size

5. Width and Height

These two are very commonly used media features and are an essential part of responsive web.

/* Exact width */
@media (width: 360px) {
  body {
    ...
  }
}

/* Maximum width */
@media (max-width: 768px) { 
  body {
   ...
}

/* Minimum width */
@media (min-width: 992px) { 
  body {
    ...
  }
}

/* Exact height */
@media (height: 360px) {
  body {
    ...
  }
}

/* Minimum height */
@media (min-height: 640px) {
  body {
    ...
  }
}

/* Maximum height */
@media (max-height: 768px) {
  body {
    ...
  }
}

/* All the values can also be in rem, em, vw, vh */

6. prefers-color-scheme

This has been introduced in media queries level 5. It will be useful when it is fully implemented! This is used to detect if the user has requested their system to use a light or dark color theme. Previously I wrote about enabling dark mode on websites using surrounding light, this can be an add on to that if the ambient light API is not available.

Check out other features introduced in media queries level 5.

These are few of the useful media features that I’ve found. There are others as well such as resolution, update, etc. Full list can be found on MDN.

If you’ve come across any other lesser known media features and it’s use cases, tweet me @_ananyaneogi!