Медиа запрос для Ipad и Ipad Pro

182
02 августа 2018, 02:40

Проблема с медиа запросами. Есть медиа запросы:

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)
Answer 1

У тебя пересечение в максимальных и минимальных значениях.

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)
READ ALSO
Как изменить расширение navbar bootstrap

Как изменить расширение navbar bootstrap

Нужно что бы кнопка для navbar появлялась не с 992рх, а к примеру с 600рхПрописала я значит такой media запрос:

183
Елемент выплывает под (CSS, Hover). При нажатии кнопки мыши исчезает блок, какбудто я убераю мышку

Елемент выплывает под (CSS, Hover). При нажатии кнопки мыши исчезает блок, какбудто я убераю мышку

Есть выплывающий блок (выплывает по CSS, методом hover) Иногда (не всегда), при нажатии кнопки мыши, в блоке (есть разные елементы) - блок исчезает...

203
Событие при появлении подвала в зоне видимости экрана

Событие при появлении подвала в зоне видимости экрана

Нужно, чтобы при появлении футера в зоне видимости экрана отработало событие, при этом высота хедера и контентной части могут быть разные

177