CSS медиа запросы: максимальная ширина или максимальная высота

490

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

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

/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
  ...
}
Фрейзер
источник

Ответы:

938

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

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

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

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

Фабрицио Кальдеран
источник
3
@media screen and (max-width: 568px) и (max-height: 320px) {} - в моем случае это работает правильно
nosensus
5
@nosensus, запятая подразумевает отношение ИЛИ, означающее, что оба могут быть верными для применяемых правил, согласно исходному вопросу. Код, который вы показываете, предназначен для отношения AND, в котором оба должны быть верны для применения правил.
Дрю Ноакс
Вы правы. «И» - это правило для обоих масштабов (высота и ширина), потому что в некоторых случаях нам нужно именно такое правило. Потому что у вас может быть два устройства, например, 320x560 и 320x480, и поворот устройства нарушит вашу работу. Я имею в виду, что знак «запятая» и «И» имеют разные значения.
Nosensus
265

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 ). Некоторые примеры кода использовались с небольшими изменениями для (надеюсь) повышения ясности объяснения.

matthewsheets
источник
3
Хороший ответ, однако, он может быть улучшен с помощью предисловия, которое сразу же дает требуемый ответ («max-width OR max-height») настолько кратко, насколько это возможно (см. Ответ fcalderans). Затем следует тщательно продуманный вспомогательный контекст. Многие пользователи ожидают мгновенного решения без необходимости вкладывать средства в более широкую кривую обучения, чем это необходимо. Как пользователь, я бы предпочел найти мгновенный ответ с возможностью поиска дополнительного контекста, а не просеивать дополнительный контекст, чтобы найти ответ. Независимо от того, хорошая работа и форматирование.
Кларус Дигнус
3
Хотя это хорошая статья, я не уверен, что конкретный вопрос - хорошее место для всего учебника для начинающих с Media Queries. Или, наоборот, вопрос настолько специфичен, что не дает этого ответа справедливо. Кроме того, термин «запрос функции» не появляется в медиазапросах, он появляется в другой спецификации CSS , и использование этого термина в контексте медиазапросов сбивает с толку - но я должен сказать это тому, кто начал использовать этот термин в Статья МДН в первую очередь. Правильный термин для Media Queries 4 - «условие носителя».
BoltClock
Допустим, я должен поддерживать все устройства iPhone, поэтому я должен написать медиа-запросы для каждого устройства в отдельности, например, iPhone 5 (книжная и альбомная ориентация), iPhone6, iPhone 6 Plus и т. Д. Если да, в конечном итоге я буду писать больше медиа-запросов, охватывающих все размер устройств. Я прав?
IAmRkrishnaV21
2

Есть два способа написания правильных медиазапросов в 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 */
}
Навнеет Кумар
источник