Объединение нескольких условий в медиа-запросах CSS с логикой OR

В медиа-запросах CSS может быть полезно указать несколько условий с использованием логики «ИЛИ» для таргетинга на устройства с разными размерами экрана или аспектами. Хотя код, указанный в вопросе, неверен, существует простой метод достижения желаемого результата.

Чтобы указать несколько условий с логикой «ИЛИ», разделите их запятыми:

@media screen and (max-width: 995px), screen and (max-height: 700px) {
  ...
}

Как объяснено в документации по адресу https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries:

"Запятые используются для объединения нескольких медиа-запросы в одно правило. Каждый запрос в списке, разделенном запятыми, обрабатывается отдельно от других. Таким образом, если какой-либо из запросов в списке является истинным, весь оператор мультимедиа. Другими словами, списки ведут себя как логический оператор или.»

Используя этот подход, медиа-запрос проверяет, меньше ли ширина экрана или равна 995 пикселям или высота экрана меньше. или равно 700 пикселям. Если любое из условий выполнено, будут применены стили, указанные в медиа-запросе.