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.