Media queries behave strangely, why?

Friends, why media queries are behaving strangely, or I misunderstood something. Help to understand, please!

The FIRST situation is the following.
background-color: red;
@media (max-width: 1630px) {
 background-color: green;
}
@media (max-width: 1024px) {
 background-color: blue;
}
@media (max-width: 992px) {
 background-color: yellow;
}
@media (max-width: 768px) {
 background-color: aqua;
}

The problem is that background-color: green used for 1629px, although it SHOULD 1630px. WHY IS IT SO?? After all, the REST are used AS EXPECTED, i.e. background-color: blue used for 1024pxand not on 1023px and the rest that less is also applied in these breakpoint, not below 1px.
Why some breakpoint apply as specified, and some are applied when the window is 1px less than the specified value?

The SECOND situation is the following.
background-color: red;
@media (max-width: 1629px) {
 background-color: green;
}
@media (max-width: 1023px) {
 background-color: blue;
}
@media (max-width: 991px) {
 background-color: yellow;
}
@media (max-width: 767px) {
 background-color: aqua;
}

Here is the following:
(max-width: 1629px) is applied on 1628px,
(max-width: 1023px) is applied on 1022px,
(max-width: 991px) applies to 990px, etc.
so now EVERY breakpoint applied to 1px smaller than specified.

It gets even more interesting. Let's say I want to put breakpoint (max-width: 1023px) applied it to 1023px, and if it works for 1px below the specified, it is logical that you can add +1px and it will be applied as intended, try:
@media (max-width: 1024px) {
 background-color: blue;
}

and then, he begins to apply it to 1024px, not less than 1px. WHAT???

What is going on and why? How to deal with it?
I would be very grateful for the answer!!!
June 3rd 19 at 20:22
1 answer
June 3rd 19 at 20:24
Solution
In the Internet there are stories about the formation of a 1px gap between breakpoints, if for a given screen width are applied simultaneously rules max-width and min-width and, if other than 100% zoom of the browser screen. Check if you have a similar situation. The solution is the same link.
Yes, I have the breakpoint 1630px campaign issue because of the fact that the scale of the screen is less than 100% and so you have to scale. because other breakpoints, this is not observed due to the fact that the screen zoom 100% - yolanda_Yun commented on June 3rd 19 at 20:27
That seemed a problem, about which You said. Really matter in the scale other than 100%
5b5041a3d6770532996651.png

Thank you very much for the answer! - yolanda_Yun commented on June 3rd 19 at 20:30
Paul, tell me more please and if you really to specify decimal values, as in the article comments, for example (max-width: px 1630.9) { //css code here }, if this does not cause problems in any browsers, such as the failure generally to perceive such requests? - yolanda_Yun commented on June 3rd 19 at 20:33
I didn't ever need to use in the layout of the fractional values of the sizes in px, I prefer to use relative values - em, for example. There you can apply any fractional values for the most accurate fit.

But I think it's worth a try. I have not found in the standards clearly mention that the sizes in px must be an integer value. Browsers are guided by standards, so I assume that to handle such values, they will be correctly and consistently, according to standards. - Loyce_Schowalt commented on June 3rd 19 at 20:36

Find more questions by tags Media queriesCSSLayoutFrontendAdaptive design