Why do tablet range media rules override PC version rules when you're still in PC range?

Question

css

Let 's say the
PK rule is initially set
.section{
height: 1000px;
}
Then adaptive
media screen and (max-width: 992px) {
height: 1700px;
}
media screen and (max-width: 763px) {
height: 2000px;
}
media screen and (max-width: 576px) {
height: 2300px;
}
And now, while still in the PC range, the rule of the second range is already triggered on the desktop, and as a result of the computer version, the height of the section is 2000px, not 1000px.
(in other ranges everything works correctly)
because of what is this?
maybe it's some kind of glitch, because it all worked, and as soon as I changed the height of this second range from 2100px to 2000px, this happened ... (I didn’t change anything in html)

Answer 1

Media order when segmenting permissions: usually from large (desktop-first) to small (higher - large, lower - smaller; less commonly used approach: mobile-first) or specify explicitly, for example:

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

from 600 to 800 pixels inclusive.
For the screen - there is a media query for the orientation of the screen position (add to the condition, to the right): or
and (orientation: landscape)and (orientation: portrait)

Answer 2

Check the width of all blocks