CSS media queries CSS

CSS @media queries allow you to write styles that will only be applied depending on the features and preferences of the user's device.

The most common thing to check for in a media query is the user's window/viewport width. Applying styles based on the user's window/viewport width allows for responsive web design.

Here are some examples of the many different things you can check with CSS media queries.

Window/viewport width media queries

Min-width media query

The min-width media query can be used to add desktop styles for larger devices and viewports without affecting users whose viewport width is smaller than the specified value.

@media (min-width: 900px) {
/* styles go here */
}

Mobile first web design uses min-width media queries and avoids max-width media queries.

Max-width media query

The max-width media query can be used to apply styles only to smaller devices and viewports without affecting users whose viewport width is larger than the specified value.

@media (max-width: 900px) {
/* styles go here */
}

Device Capabilities

Hover media query

The hover media query checks if the user's primary input mechanism can hover over elements. A laptop or desktop computer uses a mouse/trackpad which can be used to hover, whereas mobile devices use touch which can't be used to hover.

One exception is if a mobile device's primary input mechanism is a stylus, it is regarded as being able to hover.

@media (hover: hover) {
/* styles go here */
}

Pointer media query

The pointer media query is similar to the hover media query but it checks if the user has a pointing device and if so, how accurate it is.

A laptop or desktop computer with a mouse has a fine pointer value as it has a high pointing accuracy, while a touch device like mobiles and games consoles have a coarse pointer value.

@media (pointer: fine) {
/* styles go here */
}

User preference media queries

Dark mode media query

The prefers-color-scheme: dark media query allows you to check if the user has their system set to dark mode. If they do, you may want to add dark theme styles to your website here so that users in dark mode see the dark version of your website.

@media (prefers-color-scheme: dark) {
/* styles go here */
}

Reduced motion media query

The prefers-reduced-motion media query allows you to check if the user has requested their system to minimse motion/animations.

@media (prefers-reduced-motion) {
/* styles go here */
}

Contrast media query

The prefers-contrast media query allows you to check if the user has requested their system to show content with more or less contrast.

@media (prefers-contrast: more) {
/* styles go here */
}

Media type queries

Print media query

The print media query checks the media type the user is requesting. When a user tries to print your page, the styles you write in the print media query will apply.

@media print {
/* styles go here */
}

Screen media query

The screen media query checks if the media type is a screen. This will usually be the case and the only other option is print.

You can combine queries together and some people combine screen with their width media queries so that their width-dependent styles are only applied for screens and not printed documents.

@media screen {
/* styles go here */
}

/* combining screen and a width check */
@media screen and (min-width: 900px) {
/* styles go here */
}

You can learn more about media queries on MDN

Thanks for reading.
Ryan

Published on 12 Jul 2022

What is responsive web design? What is mobile first web design?