При написании медиазапроса CSS, есть ли способ указать несколько условий с помощью логики «ИЛИ»?

Я пытаюсь сделать что-то вроде этого:

/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
  ...
}

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

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

С https://developer.mozilla.org/en/CSS/Media_queries/

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

CSS Media Queries & Логические операторы: краткий обзор;)

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

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

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

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

Медиа-запросы

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

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

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

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

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

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

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

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

• Тип носителя - «экран» и
• Область просмотра имеет ширину не менее 700 пикселей и
• Ориентация экрана в настоящее время альбомная.

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

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

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

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

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

1. Тип носителя - «ручной» или
2. Область просмотра имеет ширину не менее 650 пикселей или
3. Ориентация экрана в настоящее время альбомная.

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

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

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

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

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

1. Тип носителя И минимальное разрешение не соответствуют их требованиям (соответственно «экран» и «300 точек на дюйм») или
2. Ширина области просмотра не менее 800 пикселей.

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

(Ключевое слово not может быть немного странным, чтобы заявить. Дайте мне знать, если я могу сделать лучше.;)

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

Понимание терминологии медиазапроса

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

СМИ правило (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)

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

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

only screen

only screen and (max-resolution:800dpi)

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

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

Функция запрос является самой основной частью СМИ правила и просто относится определенная особенность и свой статус в данной просматриваемую ситуации.

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

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

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

Есть два способа написания правильных медиазапросов в css. Если вы сначала пишете медиа-запросы для больших устройств, то правильный способ написания будет следующим:

@media only screen 
and (min-width : 415px){
    /* Styles */
}

@media only screen 
and (min-width : 769px){
    /* Styles */
}

@media only screen 
and (min-width : 992px){
    /* Styles */
}

Но если вы сначала пишете медиа-запросы для небольших устройств, это будет что-то вроде:

@media only screen 
and (max-width : 991px){
    /* Styles */
}

@media only screen 
and (max-width : 768px){
    /* Styles */
}

@media only screen 
and (max-width : 414px){
    /* Styles */
}