Professional CSS3

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 ...