Как обойти precision error в @media запросах по диапазону?

Question

[coderlex]

Хотелось бы использовать media запросы по диапазону вида:

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

Проблема только в том, что подобный код работает только при масштабе 1x. Если же установить масштаб x2+ и установить размеры окна браузера так, чтобы они лежали точно в точке разрыва (например, 600px для кода выше), возникает ситуация, когда ни одно из вышеуказанных правил не применяется (пруф).

Можно ли это как-то обойти?

Дополнительные пояснения:
Чтобы увидеть эффект, нужно увеличить масштаб и плавно изменять ширину рамки окна. Т.к. при масштабировании браузер оперирует числами с плавающей точкой, а media запросы из примера заданы для диапазонов [320,599] v [600, +inf), то образуется зазор в (599, 600). Причем фактический его размер на экране пропорционален коэффициенту масштабирования. Поэтому очень плавно изменяя размер окна браузера (или фрейма в случае jsfiddle), можно найти состояние, когда ни одно из правил не применяется.

Этот же косяк можно увидеть и для 3-й версии бутстрапа, на странице примеров для хелперов .visible-*, если проделать все те же шаги.

Answer 1

[Дима Паутов]

Не до конца понял вопрос, но при увеличении масштаба у меня блоки меняют цвет

Comments

[coderlex]

Чтобы увидеть эффект, нужно увеличить масштаб и плавно изменять ширину рамки окна. Т.к. при масштабировании браузер оперирует числами с плавающей точкой, а media запросы из примера заданы для диапазонов [320,599] v [600, +inf), то образуется зазор в (599, 600). Причем фактический его размер на экране пропорционален коэффициенту масштабирования. Поэтому очень плавно изменяя размер окна браузера (или фрейма в случае jsfiddle), можно найти состояние, когда ни одно из правил не применяется.

Этот же косяк можно увидеть и для 3-й версии бутстрапа, на странице примеров для хелперов .visible-*, если проделать все те же шаги.