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:

1. тип носителя "handheld"или
2. видовое окно имеет ширину не менее 650px или
ориентация экрана-альбомная.

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

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

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

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

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

1. СМИ тип и минимальное разрешение не так соотвествуйте их ("экран" и "300dpi" соответственно)или
2. видовое окно имеет ширину не менее 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). Некоторые образцы кода были использованы с незначительными изменениями ,чтобы (надеюсь) повысить ясность объяснения.