Оператор and в медиа запросах. Адаптивный и мобильный дизайн с CSS3 Media Queries
CSS правило @media используется для изменения CSS стилей на основании определенных характеристик устройства, связанных с отображением контента, таких как ширина, высота, ориентация, разрешение экрана и так далее. Имеет широкое применение в адаптивном веб-дизайне.
Поддержка браузерами
| Свойство | Opera | IExplorer | Edge |
|||
|---|---|---|---|---|---|---|
| @media | 21.0 | 3.5 | 9.0 | 4.0 | 9.0 | 12.0 |
CSS синтаксис:
@media not | only media type and (media function ) { ...код CSS }Давайте детально разберем из чего состоит синтаксис этого правила.
Логические операторы
Вы можете комбинировать медиазапросы с использованием логических операторов:
| Значение | Описание |
|---|---|
| and | Оператор and ("И" ) используется для объединения нескольких медиазапросов в один. |
| not | Оператор not ("Логическое НЕ" ) обращает результат - если медиазапрос был истинным без "not" , то он станет ложным , и наоборот. |
| only | Оператор only ("Только" ) может использоваться для скрытия таблиц стилей от устаревших браузеров, которые не могут обработать медиазапрос (игнорируют), содержащий в себе этот логический оператор. |
| , | Оператор "," позволяет объединить несколько медиазапросов через запятую. Если хотя бы один запрос возвращает "true" (соответствует), то условие выполняется и стили будут применены. Этот оператор ведет себя как логический оператор OR ("ИЛИ" ). |
Устройства (media type)
Вы можете использовать медиазапросы для конкретных типов устройств:
| Значение | Описание |
|---|---|
| all | Подходит для всех типов устройств. Это значение по умолчанию. |
| aural | Предназначено для речевых синтезаторов . |
| braille | Устройства для чтения шрифта Брайля (рельефно-точечный тактильный шрифт, предназначенный для письма и чтения незрячими и плохо видящими людьми). Значение считается устаревшим. |
| embossed | Устройства, предназначенные для печати шрифта Брайля. Значение считается устаревшим. |
| handheld | Предназначено для портативных устройств (маленький экран и ограниченная полоса пропускания - bandwidth ). Значение считается устаревшим. |
| Предназначен для печатных страниц и для режима предварительного просмотра печати. | |
| projection | Устройства проекционного типа (проекторы ). Значение считается устаревшим. |
| screen | Экраны компьютера. |
| speech | Речевые синтезаторы, устройства для чтения с экрана (для чтения страниц вслух). |
| tty | Устройства, которые используют набор символов фиксированной ширины , например, телетайпы или терминалы. Значение считается устаревшим. |
| tv | Устройства телевизионного типа (низкое разрешение, ограниченные возможности прокрутки, возможность передачи звука). Значение считается устаревшим. |
Мультимедийные функции (media function)
| Значение | Описание |
|---|---|
| aspect-ratio | Соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Например: aspect-ratio : 5/4 (соотношение пять к четырем). |
| color | Определяет количество бит на цветовую компоненту устройства вывода. Если устройство не является цветным устройством, то это значение равно нулю. . Например, если дисплей использует по 4 бита на красный и синий, а 5 бит на зеленый, то считается, что устройство использует 4 бит на цветовой компонент. |
| color-index | Количество цветов, которое устройство может отображать. |
| device-aspect-ratio | Соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Например: device-aspect-ratio : 5/4 (соотношение пять к четырем). Media Queries Level 4 " . |
| device-height | Определяет высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
| device-width | Определяет ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
| grid | Определяет основано ли выходное устройство на сеточной системе (например, терминал "tty" или дисплей телефона с одним фиксированным шрифтом), в этом случае значение будет равно 1 , если устройство растровое, то значение будет равно 0 . |
| height | Задает высоту области просмотра (используются ). |
| max-aspect-ratio | Максимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. |
| max-color | Определяет максимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения . |
| max-color-index | Максимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются. |
| max-device-aspect-ratio | Масимальное соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
| max-device-height | Определяет максимальную высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
| max-device-width | Определяет максимальную ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
| max-height | Задает максимальную высоту области просмотра (используются единицы измерения CSS). |
| max-monochrome | Указывает максимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. . |
| max-resolution | Указывает максимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (dpi ), так и в точках на сантиметр (dpcm ). |
| max-width | Задает максимальную ширину области просмотра (используются единицы измерения CSS). |
| min-aspect-ratio | Минимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. |
| min-color | Определяет минимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения . |
| min-color-index | Минимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются. |
| min-device-aspect-ratio | Минимальное соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
| min-device-height | Определяет минимальную высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
| min-device-width | Определяет минимальную ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
| min-height | Задает минимальную высоту области просмотра (используются единицы измерения CSS). |
| min-monochrome | Указывает минимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа . |
| min-resolution | Указывает минимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (dpi ), так и в точках на сантиметр (dpcm ). |
| min-width | Задает минимальную ширину области просмотра (используются единицы измерения CSS). |
| Указывает количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа . | |
| orientation | Определяет, находится ли область просмотра в режиме альбомной ориентации - экран шире, чем высота, или в портретной ориентации - высота дисплея больше или равна ширине. Для альбомной ориентации используется значение: orientation : landscape , а для портретной и orientation : portrait . |
| resolution | Указывает разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (dpi ), так и в точках на сантиметр (dpcm ). |
| scan | Указывает метод сканирования устройства вывода. Слово сканирование, используемое в этом контексте, не относится к сканеру изображений, например к сканеру, используемому для оцифровки фотографии. Скорее, это означает процесс, посредством которого изображение рисуется на телевизионном экране (или другом устройстве). Для того, чтобы указать тип развертки устройства, необходимо указать одно из значений: череcстрочная развертка - (interlace ), прогрессивная развертка (progressive ). |
| width | Задает ширину области просмотра (используются единицы измерения CSS). |
Мультимедийные функции (Media Queries Level 4)
media = "mediatype rel = "stylesheet" href = "stylesheet.css" >Обратите внимание, что в этом случае используется в качестве значения атрибута media тот же синтаксис, что и при использовании правила @media .
Подключение медиазапросов с использованием тега 2. Используя CSS правило @media внутри HTML тега
Обратите внимание, что при использовании атрибута media тега 2. Используя CSS правило @media внутри HTML тега
Кроме того, Вы можете использовать правило @import , которое позволяет копировать стили из других CSS файлов:
@import url ("main.css" ) (min-width :481px ) and (max-width :768px ); /* импортируем содержимое файла css, который предназначается для устройств с разрешением экрана, находящегося в диапозоне от 481 пикселей до 768 пикселей */ @import url ("print.css" ) print; /* импортируем содержимое файла css, который предназначается для печатных страниц и для режима предварительного просмотра печати */ @import url ("protv.css" ) projection, tv; /* импортируем содержимое файла css, который предназначается для устройств проекционного типа и телевизионного типа */ @import url ("file.css" ) screen and (orientation :landscape ); /* импортируем содержимое файла css, который предназначается для экранов компьютера И альбомной ориентации.*/Учтите тот факт, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь необходимо скачать и проанализировать (создается дополнительный запрос к серверу). Исходя из правил и рекомендаций PageSpeed Insight (Google ), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import .
Медиазапросы, используемые в Bootstrap 4
В этом разделе мы с Вами рассмотрим основные медиазапросы, которые используются в Bootstrap 4 . Bootstrap это HTML , CSS и Javascript фреймворк для создания адаптивных страниц.
Так как Bootstrap разработан, чтобы быть мобильным в первую очередь, разработчики фреймворка используют несколько медиазапросов для создания разумных точек останова для макетов и интерфейсов. Эти точки останова в основном основаны на минимальной ширине области просмотра и позволяют масштабировать элементы по мере изменения области просмотра.
Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция min-width ) используются в Bootstrap 4 :
// Small devices (landscape phones, минимальная ширина области просмотра 576px и выше) @media (min-width : 576px ) { ...код CSS } // Medium devices (tablets, минимальная ширина области просмотра 768px и выше) @media (min-width : 768px ) { ...код CSS } // Large devices (desktops, минимальная ширина области просмотра 992px и выше) @media (min-width : 992px ) { ...код CSS } // Extra large devices (large desktops, минимальная ширина области просмотра 1200px и выше) @media (min-width : 1200px ) { ...код CSS }Bootstrap в основном использует вышеуказанные диапазоны запросов для макета, системы сеток и компонентов, но иногда используют и медиазапросы, которые идут в другом направлении (заданный размер области просмотра или меньше).
Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция max-width ) используются в Bootstrap 4 :
// Extra small devices (portrait phones, максимальная ширина области просмотра 576px и ниже) @media (max-width : 575.98px ) { ...код CSS } // Small devices (landscape phones, максимальная ширина области просмотра 768px и ниже) @media (max-width : 767.98px ) { ...код CSS } // Medium devices (tablets, максимальная ширина области просмотра 992px и ниже) @media (max-width : 991.98px ) { ...код CSS } // Large devices (desktops, максимальная ширина области просмотра 1200px и ниже) @media (max-width : 1199.98px ) { ...код CSS }В Bootstrap 4 существуют также точки останова направленные на определенный сегмент размеров экрана с использованием минимальной и максимальной ширины области просмотра (мультимедийные функции min-width и max-width ):
// Small devices (landscape phones, минимальная ширина области просмотра 576px и максимальная ширина области просмотра 768px) @media (min-width : 576px ) and (max-width : 767.98px ) { ...код CSS } // Medium devices (tablets, минимальная ширина области просмотра 768px и максимальная ширина области просмотра 992px) @media (min-width : 768px ) and (max-width : 991.98px ) { ...код CSS } // Large devices (desktops, минимальная ширина области просмотра 992px и максимальная ширина области просмотра 1200px) @media (min-width : 992px ) and (max-width : 1199.98px ) { ...код CSS }Обратите внимание, что точки останова, направленные на опеределенный сегмент используют логический оператор and ("И"), который используется для объединения нескольких медиазапросов в один, в нашем случае это значение для минимальной и максимальной ширины области просмотра.
Аналогичным образом медиазапросы могут охватывать несколько сегментов точек останова:
// Medium and Large devices (tablets and desktops, минимальная ширина области просмотра 768px и максимальная ширина области просмотра 1200px) @media (min-width : 768px ) and (max-width : 1199.98px ) { ...код CSS }Настройка области просмотра
Обращаю Ваше внимание на то, что область просмотра определяет, как веб-страница отображается на мобильном устройстве, если она не задана, то ширина страницы считается равной стандартному значению, и она уменьшается на мобильном устройстве, чтобы поместиться на его экране.
Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:
name = "viewport" content = "width=device-width, initial-scale = 1" >- Атрибут name задает имя документа метаданным, значение "viewport" дает подсказку браузеру о размере начального размера области просмотра. Функция атрибута content задать значения для этого атрибута.
- Значение width=device-width атрибута content сообщает, что ширина страницы устанавливается в соответствии с размером экрана устройства в аппаратно-независимых пикселях (device-independent pixel, dip ), что позволяет странице пересчитывать положение элементов для корректного отображения на различных экранах. По аналогии допускается указать значения для высоты height=device-height .
- Значение initial-scale=1 атрибута content сообщает браузеру, что необходимо установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства (альбомной или портретной).
Если все страницы Вашего сайта адаптированы для просмотра на мобильных устройствах, то размещение вышеуказанного мета тега является обязательным.
Доступные значения:
| Значение атрибута | Определение |
|---|---|
| width | Определяет ширину в пикселях области просмотра (значение - положительное целое число или device-width ). |
| height | Определяет высоту в пикселях области просмотра (значение - положительное целое число или device-height ). |
| initial-scale | Определяет соотношение между шириной устройства (device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра. Чем больше число, тем выше масштаб. Значение - положительное целое число от 0.0 до 10.0. |
| minimum-scale | Определяет минимальное значение zoom (оно должно быть меньше или равно maximum-scale ). Значение - положительное целое число от 0.0 до 10.0. |
| maximum-scale | Определяет максимальное значение zoom (оно должно быть больше или равно minimum-scale ). Значение - положительное целое число от 0.0 до 10.0. |
| user-scalable | Логическое значение, которое определяет, может ли пользователь увеличить масштаб веб-страницы. Значение по умолчанию yes (пользователь может увеличивать масштаб). |
Версия CSS
CSS3Пример использования
Рассмотрим пример в котором установим определенные стили, которые браузер будет использовать при просмотре страниц, а другие при печати страниц (в нашем случае для экономии ресурса принтера - цвет всех элементов черный, а цвет заднего фона белый).
Для просмотра страниц пользователями мы установим следующие CSS стили:
h2 { color : brown ;} p { color : red ;} bodyСледующие CSS стили мы будем использовать при печати и предварительном просмотре страницы:
@media print { h2, p { color : #000 ;} body }Окончательный файл CSS будет выглядеть следующим образом:
h2 { color : brown ;} /* устанавливаем цвет элемента - коричневый */ p { color : red ;} /* устанавливаем цвет элемента - красный */ body { background-color : khaki ;} /* устанавливаем цвет заднего фона - хаки */ @media print { /* устанавливаем правило для печатных страниц и для режима предварительного просмотра печати */ h2, p { color : #000 ;} /* групповой селектор устанавливает цвет элементов - черный */ body { background-color : #FFF ; } /* устанавливаем цвет заднего фона - белый */ }Обращаю Ваше внимание на важный момент! Если вы используете какое-то правило до того как установлены основные стили, то они не будут работать без использования значения !important , которое отменяет значимость последнего определенного стиля, т.е отменяет конфликты стилей и делает приоритетным тот стиль, который имеет значение !important .
Другими словами, если мы разместим правило @media print { } в начале таблицы стилей, то оно не будет работать без значения !important для конфликтующих стилей (а у него это все стили):
@media print { /* устанавливаем правило для печатных страниц и для режима предварительного просмотра печати */ h2, p { color : #000 !important ;} /* групповой селектор устанавливает цвет элементов - черный */ body { background-color : #FFF !important ; } /* устанавливаем цвет заднего фона - белый */ } h2 { color : brown ;} /* устанавливаем цвет элемента - коричневый */ p { color : red ;} /* устанавливаем цвет элемента - красный */ body { background-color : khaki ;} /* устанавливаем цвет заднего фона - хаки */Теперь свяжем наш файл CSS (css_pr_media.css ) с документом, используя элемент :
rel = "stylesheet" href = "../css_pr_media.css" >HTML разметка примера:
Рапаны
Рапаны (лат. Rapana) - род хищных брюхоногих моллюсков из семейства Muricidae. Распространены в морях Тихого и Индийского океанов. С 1947 года встречается в Черном море. Длина раковины до 12-15 см. Раковина широкоовальной формы, завиток низкий, последний оборот вздут, серовато-коричневого цвета со спиральными рёбрами и осевыми утолщениями. Активные хищники, питающиеся двустворчатыми мелкими моллюсками, например, мидиями и устрицами, раковины которых они открывают при помощи своей сильной мускульной ноги. Молодые рапаны с помощью своего покрытого зубчиками языка-сверла делают отверстия в раковинах своих жертв и раскрывают их. Обитают на любых типах дна, передвигаясь с помощью мускулистой ноги.
Ниже показано как этот пример отображается в браузере, а на изображении как страница отображается в предварительном просмотре печати страницы (стили, которые мы установили для печати).
Media queries are useful when you want to modify your site or app depending on a device"s general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).
Media queries are used for the following:
- To conditionally apply styles with the CSS @media and @import at-rules.
- To target specific media for the element contains style information for a document, or part of a document.">