Understanding CSS Media Queries

Table of Contents

1. What are CSS media queries
2. How CSS media queries work
3. Example 1
4. Example 2
5. 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

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

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
• W3Schools: CSS Media Queries

Comments

[Elena]

I would also add that the responsive break points are not limited to pixels only. You can also have code like @media (max-width: 100em) or @media (max-width: 50vw)

[Aris Zagakos]

Yeah, that's correct and thank you for your comment. As you referred above media queries allows you to use your preferred units of measure and don't restrict you to use only pixels.