Я замечал, что медиа запросы могут не срабатывать на границе т.н. брек-поинтов.
К примеру, следующее правило может не срабатывать при значении 767 пикс:
|
1 |
@media (min-width: 767px) { } |
Источниками проблем являются фича масштабирования и тестирование на встроенном в браузере эмуляторе.
Покрывая сетку размеров запросами вроде:
|
1 2 3 4 5 6 |
// mobile @media (max-width: 767px) { } // tablet @media (min-width: 768px and (max-width: 1279px) { } // desktop @media (min-width: 1280px) { } |
Мы теряем из рассмотрения пиксели на стыках сетки, полагая, что размеры экрана устройства всегда целочисленные значения. В данном случае это диапазоны (767..768) и (1279..1280).
Если пользователь изменяет размеры окна браузера и пересекает стыки сетки, то велика вероятность, что верстка, не попадая ни в один из запросов, в этот момент нарушится и слегка попортит впечатление о сайте (и его разработчиках).
Всё что требуется, чтобы избежать этого нежелательного эффекта — более тщательно задать границы сетки.
Например, в scss я задаю медиа запросы следующим образом:
|
1 2 3 4 5 6 7 8 9 10 |
// breakpoints $br_mobile: 768px; $br_desktop: 1280px; $screen: "only screen" !default; // queries $desktop: "#{$screen} and (min-width: #{$br_desktop})"; $tablet: "#{$screen} and (min-width: #{$br_mobile}) and (max-width: #{$br_desktop - 0.001})"; $mobile: "#{$screen} and (max-width: #{$br_mobile - 0.001})"; |
И использую в стилях:
|
1 2 3 |
@media #{$desktop} { ... } |
Технически проблема всё же сталась, т.к. вместо зазоров в 1 пиксель у нас остались не обработанные щели в 0.001 пикселя.