Проблема с медиа запросами. Есть медиа запросы:
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)
Виртуальный выделенный сервер (VDS) становится отличным выбором
Нужно что бы кнопка для navbar появлялась не с 992рх, а к примеру с 600рхПрописала я значит такой media запрос:
Есть выплывающий блок (выплывает по CSS, методом hover) Иногда (не всегда), при нажатии кнопки мыши, в блоке (есть разные елементы) - блок исчезает...
Нужно, чтобы при появлении футера в зоне видимости экрана отработало событие, при этом высота хедера и контентной части могут быть разные