При написании медиазапроса CSS, есть ли способ указать несколько условий с помощью логики «ИЛИ»?
Я пытаюсь сделать что-то вроде этого:
/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
...
}
css
media-queries
Фрейзер
источник
источник
CSS Media Queries & Логические операторы: краткий обзор;)
Быстрый ответ.
Разделяйте правила запятыми:
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
Длинный ответ.
Здесь много всего, но я постарался сделать эту информацию плотной, а не просто пушистой. Это был хороший шанс узнать себя! Потратьте время, чтобы систематически читать, хотя, и я надеюсь, что это будет полезно.
Медиа-запросы
Медиа-запросы в основном используются в веб-дизайне для создания браузеров, ориентированных на конкретное устройство или ситуацию; это делается с помощью
@media
объявления в CSS страницы . Это может быть использовано для отображения веб-страницы по-разному при большом количестве обстоятельств: независимо от того, находитесь ли вы на планшете или телевизоре с другими форматами изображения, имеет ли ваше устройство цветной или черно-белый экран, или, возможно, чаще всего, когда пользователь меняет размер своего браузера или переключается между браузерными устройствами с различными размерами экрана (в общем, такой дизайн называется адаптивным веб-дизайном )Логические Операторы
При проектировании для таких ситуаций, по-видимому, используются четыре логических оператора, которые могут потребовать более сложных комбинаций требований при нацеливании на различные устройства или размеры области просмотра .
(Примечание. Если вы не понимаете различий между правилами мультимедиа, медиа-запросами и функциональными запросами, сначала просмотрите нижний раздел этого ответа, чтобы немного лучше ознакомиться с терминологией, связанной с синтаксисом медиа-запросов.
1. И ( и ключевое слово)
Требует, чтобы все указанные условия были выполнены до вступления в силу правил стиля.
@media screen and (min-width: 700px) and (orientation: landscape) { ... }
Указанные правила стилизации не вступят в силу, если все следующее не будет оценено как истинное:
Примечание. Я полагаю, что при совместном использовании эти три функциональных запроса составляют один медиазапрос .
2. ИЛИ ( разделенные запятыми списки )
Вместо ключевого слова или , разделенные запятыми списки используются при объединении нескольких мультимедийных запросов для формирования более сложного мультимедийного правила.
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
Указанные правила оформления вступят в силу после того, как любой медиа-запрос оценивается как true :
3. НЕ ( не ключевое слово)
Не ключевое слово может быть использовано для отрицания одного запроса средств массовой информации (а не полные СМИ править --meaning , что это только сводит на нет записей между набором запятых и не полные СМИ господствовать после объявления @media).
Аналогично, обратите внимание, что ключевое слово not отменяет медиазапросы, его нельзя использовать для отмены запроса отдельных функций в медиазапросе. *
@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }
Указанный здесь стиль вступит в силу, если
Другими словами, если тип мультимедиа - «экран», а минимальное разрешение - 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. Если вы сначала пишете медиа-запросы для больших устройств, то правильный способ написания будет следующим:
Но если вы сначала пишете медиа-запросы для небольших устройств, это будет что-то вроде:
источник