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

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

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

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

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

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

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

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

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

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

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

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

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

Анимация ожидания загрузки/обновления, используя CSS3

Октябрь 26, 2015 г.

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...

Читать

Меняем отступы сетки (gutter-width) в Bootstrap

Октябрь 2, 2017 г.

Дефолтова сетка в bootstrap 3 имеет размер 30 пикс. Понятно, что рабочий макет может содержать произвольные отступы и, если вы хотите использовать преимущества работы с grid от бутстрапа, придется как то их менять и фиксить. Фактически нужно сделать ...

Читать

 

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

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



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