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