Главная страница Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Оператор not
|
|
Создание медиа запросов в CSS3
Содержание:
1. Структура медиазапроса @media
2. Логические операторы
3. Тип носителя
4. Характеристики носителя
5. На какие размеры экрана устройств нужно ориентироваться
Структура медиазапроса
Медиазапрос состоит из правила @media, за которым следует указание типа носителя и по крайней мере одна проверяемая характеристика носителя, условие медиа запроса:
| @media screen and (max-width: 600px) { body {font-size: 80%; } } |
Стили данного медиазапроса, заключенные в фигурные скобки, будут применяться в тех случаях, когда ширина области просмотра не превышает 600px. Если ширина будет больше, то браузер игнорирует стили данного медиазапроса.
Правила @media всегда прописываются в конце файла css-стилей.
Логические операторы
С помощью логических операторов можно создавать комбинированные медиазапросы, в которых будет проверяться соответствие нескольким условиям.
Оператор and
Оператор and связывает друг с другом разные условия:
| @media screen and (max-width: 600px) { /* css-стили */; } |
Стили этого запроса будут применяться только для экранных устройств с шириной области просмотра не более 600px.
| @media (min-width: 600px) and (max-width: 800px) { /* css-стили */; } |
Стили этого запроса будут применяться для всех устройств при ширине области просмотра от 600px до 800px включительно.
Правило @media all and (max-width: 600px) {...} равнозначно правилу@media (max-width: 600px) {...}.
Оператор not
Оператор not позволяет сработать медиа запросу в противоположном случае. Ключевое слово not добавляется в начало медиа запроса и применяется ко всему запросу целиком, т.е. запрос
| @media not all and (monochrome) {...} |
будет эквивалентен запросу
| @media not (all and (monochrome)) {...} |
Если медиа запрос составлен с использованием оператора запятая, то отрицание будет распространяться только на ту часть, которая идет до запятой, т.е. запрос
| @media not screen and (color), print and (color) |
будет эквивалентен запросу
| @media (not (screen and (color))), print and (color) |