Ответ 1

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

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

От https://developer.mozilla.org/en/CSS/Media_queries/

... Кроме того, вы можете комбинировать несколько медиа-запросов в списке, разделенном запятыми; если какой-либо из медиа-запросов в списке истинен, применяется соответствующая таблица стилей. Это эквивалент логической операции "или".

Ответ 2

Запросы CSS и логические операторы: краткий обзор;)

Быстрый ответ.

Отдельные правила запятыми: @media handheld, (min-width: 650px), (orientation: landscape) { ... }

Длинный ответ.

Здесь много, но я попытался сделать его информацией плотным, а не просто пушистым письмом. Это был хороший шанс учиться! Потратьте время, чтобы систематически читать, и я надеюсь, что это будет полезно.

Запросы мультимедиа

Медиа-запросы, по существу, используются в веб-дизайне для создания событий, связанных с использованием устройств или ситуаций; это делается с помощью объявления @media на странице CSS.. Это может использоваться для отображения веб-страницы по-разному под большое количество обстоятельств: независимо от того, находитесь ли вы на планшете или телевизоре с различными пропорциями, имеет ли ваше устройство цветной или черно-белый экран или, возможно, наиболее часто, когда пользователь меняет размер своего браузера или переключается между браузеры с разным размером экрана (в общем, такое проектирование называется Отзывчивый веб-дизайн)

Логические операторы

При проектировании для этих ситуаций существует четыре логических оператора, которые могут использоваться для более сложных комбинаций требований при таргетинге на различные устройства или viewport.

(Примечание. Если вы не понимаете различия между медиа-правилами, запросами на медиа и запросами на функции, сначала просмотрите нижнюю часть этого ответа, чтобы немного лучше узнать терминологию, связанную с синтаксисом медиа-запросов

1. И (и ключевое слово)

Требуется, чтобы все указанные условия были удовлетворены, прежде чем правила стилизации вступят в силу.

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

Указанные правила стилизации не вступят в силу, если все следующие значения не будут считаться истинными:

• Тип носителя - "экран" и
• Видовой экран шириной не менее 700 пикселей и
• Ориентация экрана в настоящее время является ландшафтной.

Примечание. Я полагаю, что эти три функциональных запроса, которые используются вместе, составляют один мультимедийный запрос.

2. ИЛИ (списки, разделенные запятыми)

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

@media handheld, (min-width: 650px), (orientation: landscape) { ... }

Указанные правила стиля вступят в силу после того, как любой один медиа-запрос будет оцениваться как истинный:

• Тип носителя - "handheld" или
• Окно просмотра не менее 650 пикселей или
• Ориентация экрана в настоящее время является ландшафтной.

3. НЕ (не ключевое слово)

Нельзя использовать ключевое слово , чтобы свести на нет один мультимедийный запрос (и НЕ полное медиа-правило - это означает, что оно только отменяет записи между набором запятых, а не полным правилом массовой информации, следующим за @media).

Аналогично, отметить, что ключевое слово not исключает медиа-запросы, оно не может использоваться для отрицания отдельного запроса функции в медиа-запросе. *

@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }

Указанный здесь стиль вступает в силу, если

• Тип мультимедиа и минимальное разрешение не соответствуют их требованиям ( "экран" и "300 точек на дюйм" соответственно) или
• Объем видового экрана не менее 800 пикселей.

Другими словами, если тип носителя - "экран" , а минимальное разрешение - 300 точек на дюйм, правило не вступит в силу, если минимальная ширина окна просмотра не менее 800 пикселей.

(Ключевое слово не может быть немного напуганным. Сообщите мне, могу ли я сделать лучше.;)

4. ТОЛЬКО (только ключевое слово)

Насколько я понимаю, единственное ключевое слово используется для предотвращения более старых браузеров от неправильного толкования новых медиа-запросов как более раннего, более узкого типа медиа. При правильном использовании старые/несовместимые браузеры должны просто игнорировать стиль в целом.

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Более старый/несовместимый браузер просто проигнорирует эту строку кода, я считаю, что он будет читать единственное ключевое слово и считать его неправильным типом мультимедиа. (См. здесь и здесь для получения дополнительной информации от более умных людей)

ДЛЯ БОЛЬШЕ ИНФОРМАЦИИ

Для получения дополнительной информации (включая дополнительные функции, которые можно запросить), см. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators

Общие сведения о терминологии медиа-запросов

Примечание. Мне нужно было изучить следующую терминологию для всего здесь, чтобы иметь смысл, особенно в отношении ключевого слова. Вот это, как я понимаю:

A правило СМИ (MDN также, похоже, вызывает эти медиа-заявления) включает в себя термин @media со всеми его последующими медиа-запросами

@media all and (min-width: 800px)

@media only screen and (max-resolution:800dpi), not print

@media screen and (min-width: 700px), (orientation: landscape)

@media handheld, (min-width: 650px), (min-aspect-ratio: 1/1)

A медиа-запрос - это набор запросов функций. Они могут быть такими же простыми, как один запрос функции, или они могут использовать ключевое слово и для формирования более сложного запроса. Медиа-запросы можно разделить запятыми, чтобы сформировать более сложные медиа-правила (см. Выше или выше).

screen (Примечание: здесь используется только один запрос функции.)

only screen

only screen and (max-resolution:800dpi)

only tv and (device-aspect-ratio: 16/9) and (color)

НЕ handheld, (min-width: 650px). (Обратите внимание на запятую: здесь есть два медиа-запроса.)

A запрос функции является самой основной частью медиа-правила и просто относится к данной функции и ее статусу в данной ситуации просмотра.

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

Кодовые фрагменты и информация, полученные из:

мультимедийные запросы CSS вкладки Mozilla (лицензированы в соответствии с CC-BY-SA 2.5). Некоторые образцы кода использовались с небольшими изменениями (надеюсь), увеличивая ясность объяснения.