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

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

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

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

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

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

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

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

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

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

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

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

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

Пропорциональное заполнение контейнера картинкой

Ноябрь 29, 2017 г.

Речь идет о том, чтобы показать изображение внутри контейнера так, чтобы оно заполнило собой весь контейнер, но при этом не изменились пропорции картинки. Сейчас это актуально в связи с необходимостью поддержки отображения сайта на мобильных устройствах. ...

Читать

Эффект, затрудняющий прочтение текста

Август 1, 2018 г.

Этот эффект я увидел на одном сайте, где авторы решили так оригинально бороться с пользователями ад-блокера. Дескать сайт живет за счет рекламы, а раз ...

Читать

 

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

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



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