DEV Community

loading...

Understanding CSS Media Queries

Aris Zagakos
・2 min read

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 */
Enter fullscreen mode Exit fullscreen mode

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) */
}
Enter fullscreen mode Exit fullscreen mode

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);
    }
}
Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

Resources

Discussion (2)

Collapse
violet profile image
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)

Collapse
zagaris profile image
Aris Zagakos Author

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.