CSS Media Queries & Logical Operators: краткий обзор ;)

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

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

долгий ответ.

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

---

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

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

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

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

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

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

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

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

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

• тип носителя - "экран"и
• видовой экран имеет ширину не менее 700px и
ориентация экрана-альбомная.

примечание: Я считаю, что использовать вместе, эти трое feature queries составьте один media query.

2. Или (списки через запятую)

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

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

указанного стиль правила вступят в силу после ни один запрос СМИ значение true:

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

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

The не ключевое слово может быть используется для отрицания одного media query (и не полный носитель правила--это означает, что он только отрицает записи между набором запятых, а не полное правило мультимедиа после объявления @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

---

Понимание Терминологии Медиа-Запросов

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

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 feature запрос является самой основной частью правила мультимедиа и просто касается данной функции и ее статуса в данном просмотре ситуация.

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

---

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

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