Media queries – where can you use it

Media queries are filters set in CSS code, which help to describe the website for a bunch of displays (screen, print). In media queries, the mostly used filters are min/max width, min/max height, min/max pixel ratio, and min/max aspect ratio.

How to build media queries

It's pretty simple to first create a media query and then create more complicated filters. The basic media query looks like the following:

@media screen and (min-width: 640px)
  .element
    background: #000

Compiled CSS:

@media screen and (min-width: 640px) {
    .element {
        background: #000;
    }
}

With this media query, you are filtering all CSS declarations for a screen whose minimal width is 640px. Let's try to make it more complex and let's try to create some more media queries for specific devices.

How media queries work?

Media queries are filters, as mentioned previously. But let's try to see it in code and browser. This simple chapter will show you how...