CSS Media Queries Tutorial
Tags: css, webdev, tutorial, writing
Published: 2022-07-27 13:08:00

_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:
```css
@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`):
```css
@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:
```css
@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:
```css
/* 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](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)