Ananya Neogi

Posted on Feb 12, 2019

Useful CSS Media Query Features

#webdev #css

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.

Edit: As pointed out here, according to caniuse, it is available in the technology preview version of safari.

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, let me know!

Top comments (10)

Yisus Castro✨ • Feb 13 '19

I didn't know about the aspect ratio media queries! 🤯

Seems like it could be useful, it's supported basically everywhere but Edge/IE (according to MDN page) 🧐

Ananya Neogi • Feb 13 '19

Yes! Aspect ratios are really great!

Roland Taylor • May 21 '19

IMHO, still better to go with width and height, because you never know what quirks may pop up!

Andrew Bone • Feb 12 '19

This is great, I didn't know about hover I'll have to think of an excuse to use it 😁

Oh, I wrote an article about prefers-color-scheme 😉

dev.to/link2twenty/future-of-css-c...

Ananya Neogi • Feb 13 '19

Great article on prefers-color-scheme! Looking forward to read more in the future of CSS series 🙂

rugk • May 22 '19

BTW, as for 8., Firefox 67 supports this too prefers-color-scheme too now. Actually, I've written about it in detail here:
dev.to/rugk/dyk-your-website-can-g...

And because I wanted to toggle it in my browser and not (only) system, I've created an add-on for exactly that: addons.mozilla.org/de/firefox/addo...