CSS медиа-запрос выберите дополнение ширины интервала

Question

Я работаю над веб-страницей, где мне часто нужно использовать медиа-запросы, подобные следующим:

@media (min-width: 769px) and (max-width: 1280px) {
  ...
}

(Или с переменными, так как я на самом деле использую Sass: (min-width: $vertical-view-max + 1) and (max-width: $medium-view-max))

Теперь я нахожусь в случае, когда я хочу, чтобы медиа-запрос запускался, когда ширина не в этом интервале.

Я обнаружил, что следующее правило работает нормально:

@media (max-width: 768px), (min-width: 1281px) {
  ...
}

Но я не могу заставить его работать с not оператор:

@media (not ((min-width: 769px) and (max-width: 1280px))) {
  ...
}

Я пробовал разные круглые скобки (этот даже кажется, неверный синтаксис). Как мне написать правило? Разве это невозможно вообще с not оператор?

Answer 1

Это похоже на действительный медиазапрос уровня 4, но ни один браузер не был обновлен для поддержки новой грамматики, несмотря на то, что некоторые из них начали поддерживать некоторые из новых медиа-функций. В то же время, чтобы соответствовать уровню 3 с not ключевое слово вашего медиазапроса должно выглядеть следующим образом (с добавленным типом медиа и удалением всех, кроме самых внутренних пар скобок):

@media not all and (min-width: 769px) and (max-width: 1280px) {
  ...
}

Несмотря на то, что может свидетельствовать очевидный недостаток скобок, not на самом деле служит для отмены всего медиа-запроса, начиная с all and,