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

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

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

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

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

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

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

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

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

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

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

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

Разрыв строки во flex

Март 6, 2024 г.

В общем случае, это может быть и "разрыв столбца", зависит от выбранного направления заполнения flex контейнера (задаётся свойством flex-direction). Суть проблемы в том, что иногда требуется прекратить заполнение вдоль выбранного направления и начать ...

Читать

Bootstrap extra large - стили для сетки свыше 1600 точек

Апрель 20, 2017 г.

3я версия Bootstrap определяет 4 размера сетки: <768px, ≥768px, ≥992px, ≥1200px. Этих размерностей явно не достаточно. В то время как на телефонах ...

Читать

Текст style CSS

Март 31, 2016 г.

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

Читать

Выравнивание блока HTML (вертикально и горизонтально)

Сентябрь 17, 2015 г.

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

Читать
 

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

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



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