Проблема с медиа запросами. Есть медиа запросы:
Ipad:
@media only screen and (min-device-width: 480px) and (max-device-width: 768px)
Ipad Pro:
@media only screen and (min-device-width: 767px) and (max-device-width: 1024px)
Получается, что второй запрос отображается и на Ipad и соответственно мне мешает. Не могу понять почему он вообще работает на Ipad если разрешения разные. Объясните пожалуйста.
Чем отличаются эти media-запросы:
@media only screen and (max-width: 992px)
@media (min-width: 767px) and (max-width: 992px)
@media only screen and (max-width: 992px) and (min-width: 769px)
У тебя пересечение в максимальных и минимальных значениях.
Ipad:
max-device-width: 768px
Ipad Pro:
min-device-width: 767px
Увеличь данной значение на 1-2px.
media-запросах:only игнорирует старые версии браузеров, то есть media-запрос не будет выполнен в старой версии браузера.
screen - тип устройства на котором будет выводится ваш контент, для данного типа соответствуют цифровые устройства такие как мониторы, и мобильные экраны.
На данный момент лучшей практикой для современных устройств является использование media-запросов типа:
@media only screen and (max/min-width: value)
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости