CSS media query — ошибка в округлениях

Я замечал, что медиа запросы могут не срабатывать на границе т.н. брек-поинтов.

К примеру, следующее правило может не срабатывать при значении 767 пикс:

Источниками проблем являются фича масштабирования и тестирование на встроенном в браузере эмуляторе.

Покрывая сетку размеров запросами вроде:

Мы теряем из рассмотрения пиксели на стыках сетки, полагая, что размеры экрана устройства всегда целочисленные значения. В данном случае это диапазоны (767..768) и (1279..1280).

Если пользователь изменяет размеры окна браузера и пересекает стыки сетки, то велика вероятность, что верстка, не попадая ни в один из запросов, в этот момент нарушится и слегка попортит впечатление о сайте (и его разработчиках).

Всё что требуется, чтобы избежать этого нежелательного эффекта — более тщательно задать границы сетки.

Например, в scss я задаю медиа запросы следующим образом:

И использую в стилях:

Технически проблема всё же сталась, т.к. вместо зазоров в 1 пиксель у нас остались не обработанные щели в 0.001 пикселя.

Написать комментарий

Мало букафф? Читайте есчо !

Меняем оформление input checkbox с помощью CSS

Декабрь 27, 2017 г.

Оформление элементов формы - это старая проблема. Ситуация несомненно улучшается, но финала пока не видно. С появлением псевдо-контейнеров :after и :before ...

Читать

И снова переносы в CSS

Ноябрь 30, 2021 г.

Да, вновь тема переносов, т.к. я уже писал небольшую статью, но еще раз возвращаюсь к данной теме с некоторыми новыми подробностями. Итак - разрыв слова, перенос текста на новую строку - рассмотрим, какие директивы даёт нам CSS для управления поведением ...

Читать

 

Комментарии к «CSS media query — ошибка в округлениях»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: