CSS медиазапросы: max-width ИЛИ max-height

Кома используется для указания двух (или более) различных правил:

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

Согласно документации MDN, запятые служат для объединения нескольких медиа-запросов в одно правило. Каждый запрос в списке, разделенном запятыми, воспринимается отдельно от других. Таким образом, если один из запросов в списке истинён, то всё условие медиа-запроса считается истинным. Иными словами, списки ведут себя как логический оператор "ИЛИ".

Существует два подхода к написанию медиа-запросов в CSS. Если вы используете подход "от большего к меньшему" (desktop-first), то правильный способ написания будет следующим:

@media only screen 
and (min-width : 415px){
    /* Стили для устройств с шириной >= 415px */
}

@media only screen 
and (min-width : 769px){
    /* Стили для устройств с шириной >= 769px */
}

@media only screen 
and (min-width : 992px){
    /* Стили для устройств с шириной >= 992px */
}

Если же вы предпочитаете подход "от меньшего к большему" (mobile-first), то ваши медиа-запросы могут выглядеть так:

@media only screen 
and (max-width : 991px){
    /* Стили для устройств с шириной <= 991px */
}

@media only screen 
and (max-width : 768px){
    /* Стили для устройств с шириной <= 768px */
}

@media only screen 
and (max-width : 414px){
    /* Стили для устройств с шириной <= 414px */
}

Выбор подхода зависит от вашей стратегии разработки и того, какие устройства вы хотите поддерживать в первую очередь.

Да, вы можете использовать and для создания комбинированных медиазапросов, как показано в следующем примере:

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

В этом коде условия объединяются с помощью запятой, что позволяет применять стили как для максимальной ширины экрана, так и для максимальной высоты экрана. Таким образом, стили внутри блока будут применены, если выполняется хотя бы одно из условий.