Understanding CSS Media Queries
Tags: html, css, webdev, beginners
Published: 2021-07-18 13:46:41

## Table of Contents
1. [What are CSS media queries](#what-are-css-media-queries-and-why-are-useful)
2. [How CSS media queries work](#how-css-media-queries-work)
3. [Example 1](#example-1)
4. [Example 2](#example-2)
5. [Resources](#resources)

## What are CSS media queries and why are useful?

CSS media queries give us the ability to control, modify and make the layout of a website responsive based on some rules we apply on them.

## How CSS media queries work?

Media queries work with `@media` declaration that gives to the applied block a condition. If the given condition is true then the corresponding rule is applied.

The CSS media queries have four possible `types`:
```
all /* apply to all media type devices */
print /* apply on printers */
screen /* apply on screens */
speech /* apply on speech synthesizers */
```
The `@media type` is optional and if we skip it, the `all` type will be implied by default.

Now, let's see some examples on how to apply `@media` declaration based on different screen resolutions.

```
@media screen and (min-width: 600px) {
 /* Apply when the browser is at least 600px or above */
 /* Equivalently we can write for any device */
 /* @media (min-width: 600px) */
}

@media screen and (max-width: 800px) {
 /* Apply when the browser is at maximum 800px or less */
 /* Equivalently we can write for any device */
 /* @media (max-width: 800px) */
}

@media screen and (min-width: 600px) and (max-width: 800px)
 /* Apply when the browser is from 600px to 800px */
 /* Equivalently we can write for any device */
 /* @media (min-width: 600px) and (max-width: 800px) */
}
```

In the examples bellow, we will discuss two cases where we use media queries. In these examples, the idea is how the navbar items change and reorganize as the screen resolution changes.

*Moreover, on these examples i don't emphasize so much in the style of the elements, but in the way the media queries are applied on them. You can see the code in detail on the pinned codepens.*

## Example 1

{% codepen https://codepen.io/zagaris/pen/rNmWqbX %}

When the screen width size is `800px or less`, the `navbar  items` will be centered in a column and when the screen width size is `600px or less`, the `navbar  items` will be blue.

```
@media (max-width: 800px) {
    nav ul {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 600px) {
    nav ul {
        flex-direction: column;
        text-align: center;
    }
    nav {
        background-color: rgb(62, 109, 149);
    }
}
```
## Example 2

{% codepen https://codepen.io/zagaris/pen/qBmqQEN %}

When the screen width size is `800px or less`, a button appears and the navbar becomes hidden. 
When we click the button the `navbar items` will appear in a column and when the screen width size is `600px or less`, the `navbar items` will be blue.

```
@media (max-width: 800px) {
  nav ul {
    display: none;
    flex-direction: column;
    width: 100%;
  }
  nav ul.show {
    display: flex;
  }
  .my-button {
    display: block;
  }
}

@media (max-width: 600px) {
    nav ul {
    display: none;
    flex-direction: column;
    width: 100%;
  }
  nav ul.show {
    display: flex;
  }
  .my-button {
    display: block;
  }
  nav {
    background-color: rgb(62, 109, 149);
  }
}
```

## Resources

* [MDN: Beginner's guide to media queries](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries)
* [W3Schools: CSS Media Queries](https://www.w3schools.com/css/css3_mediaqueries_ex.asp)