CSS Media Queries Tutorial

#css #webdev #tutorial #writing

Media queries are a CSS technique that we can utilize when making our pages responsive.

We use @media to create a CSS rule that only executes if a specified condition is true.

For example, if the device browser window is 600px or smaller, set the background-color to red:

@media only screen and (max-width: 600px) {
  body {
    background-color: red;
  }
}

And just like that we have a rule targeting small devices!

Using media queries

We can media queries to check things, such as:

width and height of the viewport
width and height of the device
screen orientation (is the device landscape or portrait?)
screen resolution

By being able to check this information, we’re able to deliver a better experience for our users. We can create rules that display the layout in a way that best suits the device being used.

To understand the anatomy of a media query, let’s look at our options with media types, media features & logical operators.

Media types

Media types allow us load CSS based on the device type.

The following media types are available:

all for all media devices
print used for printers
screen used for displaying on a screen (computers, tablets, phones, etc)
speech used for screen readers

screen is the most commonly used type.

Media features

Media features describe specific characteristics of the users’ device.

The media query will apply when it evaluates as ‘true’.

Here’s the list of features we can test for:

width
height
device-width
device-height
aspect-ratio
device-aspect-ratio
resolution
orientation
scan
grid
color
color-index
monochrome

Note that each has a corresponding min-* and max-* value. And all are optional!

Logical operators

We use the logical operators not, and, and only to create a more complex media query.

and

We use and to combine multiple media features together into a single media query. Each feature must be true for the query to return true. It’s also used for joining media features with media types.

not

The not operator is used to negate a media query. It will be true if the query would otherwise return false. When using not you must also specify a media type.

only

The only operator is used to apply a style only if an entire query matches, It’s useful for preventing older browsers from applying selected styles. When using only, you must also specify a media type.

, (comma)

We can also combine multiple media queries into a single rule by separating them with commas. If any of the queries in the list are true, the entire media statement returns true. So it can be thought of as acting like an or operator.

Media query syntax

So armed with this knowledge, lets revisit the media query syntax!

A media query consists of a media type (in this case screen) and can contain one or a number of expressions (here we use max-width):

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

The query will return true if the media type matches the type of device the page is being displayed on & if all expressions in the media query are true.

When a media query returns true, the corresponding style rules will be applied!

Let’s look at a more complex example..

Here the rule applies when the user has a screen device (a computer, tablet or phone), the width is between 600 and 768 pixels, and the orientation is landscape:

@media screen and (max-width: 768px) and (min-width: 600px) and (orientation: landscape) {
  /* ... */
}

Typical device breakpoints

There are tons of screens and devices with different heights and widths, so it’s quite difficult to create an exact breakpoint for each device.

Often to simply the process of coding responsive layouts, we create media queries targeting devices based screen size ranges:

/* Extra small devices (phones, less than 600px wide) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets & large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops & desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

A better practice however, is to create your media queries in accordance with the needs of your content. This way you’ll reduce the likelihood of having your layout break, on devices you may not have considered.

Conclusion

If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
If you enjoyed this article & would like to leave a tip — click here