Почему медиа-запрос `not (some-width: Xem)` никогда не запускается?
Я пытаюсь отрицать max-device-width медиа-запрос (причина этого я не буду (max-device-width: X) а также (min-device-width: X) стрелять, если устройство имеет именно эту ширину). К сожалению, not (min-or-max-some-width: X) Медиа-запросы никогда не запускаются.
Вот небольшая скрипка. Я ожидаю две желтые линии на рабочем столе и две красные линии на мобильном телефоне. Я получаю только одну желтую линию на рабочем столе (последняя) и только одну красную линию на мобильном телефоне (первая).
Что я делаю неправильно?
1 ответ
Когда впервые появились медиазапросы, требовалось not ключевое слово, за которым следует медиа-тип, чтобы медиа-запрос был действительным. Это кажется странным, но именно так была определена грамматика (см. media_query производство).
Это теперь исправлено в медиазапросах уровня 4 (см. <media_not> производство), так что у вас должно работать как положено в браузерах, которые соответствуют MQ4. Тем не менее, ни один из браузеров, которые начали поставлять мультимедийные функции уровня 4, еще не внедрил новую грамматику.
А пока вам нужно добавить тип носителя. Если тип носителя не важен, используйте all:
not all and (max-device-width: X)