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

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

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

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

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

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

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

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

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

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

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

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

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

Позиционирование фона с помощью background-position

Май 3, 2018 г.

В CSS, для позиционирования фонового изображения в контейнере, мы используем свойство background-position. Свойство можно задать отдельно для оси X и Y,  кроме того можно задать 2, 3 или 4 параметра. Классический случай - позиционирование с ...

Читать

Текст style CSS

Март 31, 2016 г.

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

Читать

 

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

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



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