Could you please explain the concept of media queries?

Question

css

I don't understand how to do media queries at all. I watched a lot of all sorts of videos, read, but somehow it’s hard to get it at all. Can someone explain as simply and understandably as possible?
Thanks in advance

Answer 1

It's simple, initially you write your styles for a specific device and extension, and then you want your site to be displayed correctly on other devices and extensions, and here you apply media queries, overriding your styles, for example, you write:

@media (min-width: 600px) and (max-width: 800px) {
/* CSS-стили */;
}

And now the styles defined inside {} will only work for devices whose width is between 600px and 800px inclusive.
It is clear that media queries are not limited to these properties, but there are a wagon and a small cart, but it is enough to understand what it is and why.
The most sensible, in my opinion, "documentation" on media queries is here and here , and here and here are quite good examples.