CSS media queries, why only?

Question

css

Let me have a few questions about media queries, please:
1. According to the guide "The only operator allows you to include styles for browsers that do not support media queries", for example @media only screen and (color) {/* css-стили */;}
How does it work? I understand that if the browser does not support a media query, then @mediait should not understand the tag, but @media onlyif you believe the reference book, the query understands why others, "normal" ones, do not understand? Where is the logic? How so?
2. @media all- why is the all tag needed? Why not just write @media? Will not work?
3. @media screen- what falls under the "screen"? All devices now have a color monitor, from phones to computers (except maybe e-books). What is this tag for and why, arguing with such logic, is it different from all?
4. Forms of requests for several control points:

@media screen and (max-width: 650px) {}
@media screen and (max-width: 1020px) {}
@media screen and (max-width: 320px) {}

how does CSS parse out of these requests what to apply? Does a 320 px device fit all three? Or did I give an incorrect example, but is it correct to set in the "min-max" ranges through and? (but I took it from one of the articles on adaptive layout). Or is it necessary to put media styles strictly in descending order of resolution, so that the bottom one in the code is the one with the smallest resolution?
5. The default style, the original one, so to speak, does it also need to be logically tied to some range in responsive layout? Those. when using media queries all styles become under media queries? Or how will it then be applied if the media query is not set?
6. Is it possible to make multiple .css files for different media queries? and how to connect them correctly? or should everything be in one .css?
7. Is it possible to write media queries multiple times after each block? Or should all blocks be listed in one media query?

Answer 1

1-3) @media (max-width: 500px) {} - все
4)

Does a 320 px device fit all three?

Yes
the rule below in the code will be applied. As if there was no media, but there was plain css.
4)

Or is it necessary to put media styles strictly in descending order of resolution, so that the bottom one in the code is the one with the smallest resolution?

If you first make up for the monitor, then you adapt it for mobile phones, then the smallest one will be at the bottom, because it needs to override the rules for large resolutions.
If mobile first, then styles for the phone without media, and for higher resolutions, write media queries below.
5) if the style never changes (color for example), a media query is not needed for it.
6) It is not convenient to look for styles in different places.
it's good if one class occurs 1 time in css. So it's better to support
sass code allows you to write media inside the rule

.elem {
    color: red;
    @media () {
        color: red;
     }
}

7) It's a matter of convenience. The main thing is not to mix these 2 cases.

Answer 2

I'll add Alex Glebov 2, 3 to the answer
. For example, there are also printers and screen readers.
4. If the style matches several requests, then the usual logic applies. Or "overwritten" what is higher in the document, or depending on the specificity of the selectors.
7. I usually do this: if there are few changes for adaptation, then I write the main selector and immediately below it the necessary media. If there are many, then vice versa, the media query and all the selectors that need it are in it.
And most importantly: just test on a simple example with changing the background color depending on the screen size. Write media in one or the other order, see DevTools. Try depending on screen width, viewport, pixel density, aspect ratio, etc. And you will quickly understand.
And also, at the same time, 2 links about viewports of mobile devices at once
https://www.esolutions.se/en-GB/test
viewportsizes.com
(Usually this is the next question, why is a version from 320 displayed on a mobile device with a screen of 1920 pixels)