How to bypass precision error in @media range queries?

Question

css

I would like to use media queries on the range of the form:

@media (min-width: 320px) and (max-width: 599px) { ... }
@media (min-width: 600px) and (max-width: 899px) { ... }

The only problem is that this code only works at a scale of 1x. However, if you set the zoom to x2+ and set the dimensions of the browser window so that they lie exactly on the break point (for example, 600px for the code above), there is a situation where none of the above rules apply ( proof ).
Can this be bypassed somehow?
Additional explanations:
To see the effect, you need to zoom in and smoothly change the width of the window frame. Because when scaling the browser operates with floating point numbers, and the media queries from the example are set for the ranges [320,599] v [600, +inf), then a gap is formed at (599, 600). Moreover, its actual size on the screen is proportional to the scaling factor. Therefore, by very smoothly resizing the browser window (or frame in the case of jsfiddle), you can find a state where none of the rules are applied.
The same cant can be seen for the 3rd version of the bootstrap, on the examples page for .visible-* helpers, if you follow all the same steps.

Answer 1

I didn’t fully understand the question, but when I zoom in, my blocks change color