How to properly write @media screen?

Question

css

Hello, please tell me how to record media screen correctly?
1 option

@media screen and (min-device-width: 375px)  and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}

Option 2

@media screen and (min-device-width: 375px),  and (max-device-width: 667px), and (-webkit-min-device-pixel-ratio: 2), and (orientation: portrait) {}

3 option

@media screen and (min-device-width: 375px)  and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}

4 Option

@media screen and (min-device-width: 375px), screen and (max-device-width: 667px), screen and  (-webkit-min-device-pixel-ratio: 2), screen and  (orientation: portrait) {}

And 2nd question, is it correct to record media screen from a lower resolution to a higher one or vice versa?
1 option

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {}

@media only screen and (min-device-width: 460px) and (max-device-width: 760px) {}

Option 2

@media only screen and (min-device-width: 460px) and (max-device-width: 760px) {}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {}

Thanks a lot.

Answer 1

Try to familiarize yourself with the purpose of media query parameters.
screen - means display device of type "monitor". Putting it or not depends on how you are going to apply the styles. In addition to screen, it can be print (for printers), tv (for TVs, low resolution), projection and others. media types .
device-pixel-ratio - pixel density, density 2 and higher is inherent in retina displays.
orientation - the position of the portable device in space.
So it's not possible to directly answer your question. All requests are correct. The question is when and what conditions to apply.
There is no "correct" answer to the second question either. If you are using an approach called " mobile first" then it will be more convenient to write from smaller to larger. If you first typeset the "large" version, and then adapt it to smaller resolutions, then, accordingly, it will be more convenient to write from larger to smaller. Both approaches to layout have the right to life, and you cannot name one of them more correct.I
will add on the second question.If you use the ranges from and to (as in your examples), then there is absolutely no difference in what order to place the code, because these ranges usually do not intersect.The
order matters in such cases (without setting the range, when the previous style overlaps with the next):

.block { width: 100px; }
@media (min-width: 460px) { .block { width: 400px; } }
@media (min-width: 768px) { .block { width: 700px; } }

PS. only screen is a hack for ancient browsers that don't understand media queries. Irrelevant for 5 years already. Just write screen .