Медиа-запросы CSS: max-width или max-height
при написании медиа-запроса CSS есть ли способ указать несколько условий с логикой" или"?
Я пытаюсь сделать что-то вроде этого:
/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
...
}
2 ответов
используйте запятую, чтобы указать два (или более) разных правила:
@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. И (и ключевое слово)
требует все указанные условия должны быть met прежде чем правила укладки вступят в силу.
@media screen and (min-width: 700px) and (orientation: landscape) { ... }
указанные правила стиля не будут введены в действие, если все из следующих оценить как true:
- тип носителя - "экран"и
- видовое окно имеет ширину не менее 700px и ориентация экрана-альбомная.
примечание: Я считаю, что использовать вместе, эти трое!--35-->характеристика запросов составьте один медиа-запросов.
2. Или (разделенные запятыми списки)
, а не или ключевое слово, разделенные запятыми списки используются в цепочке нескольких медиа-запросов вместе, чтобы сформировать более сложное правило мультимедиа
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
указанного стиль правила вступят в силу после ни один запрос СМИ значение true:
- тип носителя "handheld"или
- видовое окно имеет ширину не менее 650px или ориентация экрана-альбомная.
3. Не (не ключевое слово)
на не ключевое слово может быть используется для отрицания одного медиа-запросов (а не полной правила--означает, что он только отрицает записи между набором запятых, а не полное правило мультимедиа после объявления @media).
аналогично, Примечание что не ключевое слово отрицает медиа-запросы, это не может используется для отрицания запроса отдельных объектов в запросе мультимедиа.*
@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }
указанный здесь стиль вступит в силу, если
- СМИ тип и минимальное разрешение не так соотвествуйте их ("экран" и "300dpi" соответственно)или
- видовое окно имеет ширину не менее 800 пикселей.
другими словами, если тип носителя - "экран", а минимальное разрешение-300 dpi, правило будет не вступают в силу, если минимальная ширина окна просмотра не менее 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
Понимание Терминологии Запросов СМИ
Примечание: мне нужно было изучить следующую терминологию для всего здесь, чтобы иметь смысл, особенно в отношении не ключевое слово. Вот как я это понимаю:--27-->
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)
фрагменты кода и информация, полученная из:
Media-запросы CSS by Вкладчики Mozilla (под лицензией CC-BY-SA 2.5). Некоторые образцы кода были использованы с незначительными изменениями ,чтобы (надеюсь) повысить ясность объяснения.