CSS правило @mediacss3

CSS правила

Определение и применение

CSS правило @media используется для изменения CSS стилей на основании определенных характеристик устройства, связанных с отображением контента, таких как ширина, высота, ориентация, разрешение экрана и так далее. Имеет широкое применение в адаптивном веб-дизайне.

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
@mediacss321.03.59.04.09.012.0

CSS синтаксис:

@media not | only mediatype  and (media function) {
код CSS 
}

Вы можете подключать различные стили для различных устройств, используя HTML тег <link> (определяет связь между документом и внешним ресурсом) и его атрибута media:

<link media = "mediatype and | not | only (media function)" rel = "stylesheet" href = "stylesheet.css">

Вы можете подключать различные стили для различных устройств, используя HTML тег <style> (сообщает браузеру, что внутри него содержится код CSS):

1. Используя атрибут media HTML тега <style>:

	<style media =  "mediatype and | not | only (media function)">
	код CSS 
	</style>
	
2. Используя CSS правило @media внутри HTML тега <style>:

	<style>
	@media not | only mediatype  and (media function) {
	код CSS 
	}
	</style>

Кроме того, Вы можете использовать правило @import, которое позволяет копировать стили из других CSS-файлов. Но учтите, что оно увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь, тоже нужно скачать и проанализировать. Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

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

Вы можете комбинировать медиа-запросы с использованием логических операторов:

ЗначениеОписание
andОператор and ("И") используется для объединения нескольких медиа-запросов в один.
notОператор not ("Логическое НЕ") обращает результат - если медиа-запрос был истинным без "not", то он станет ложным, и наоборот.
onlyОператор only ("Только") может использоваться для скрытия таблиц стилей от устаревших браузеров, которые не могут обработать медиа-запрос (игнорируют), содержащий в себе этот логический оператор.
,Оператор "," позволяет объединить несколько медиа-запросов через запятую. Если хотя бы один запрос возвращает "true" (соответствует), то условие выполняется и стили будут применены. Этот оператор ведет себя как логический оператор OR ("ИЛИ" ).

Устройства

Вы можете использовать медиа-запросы для конкретных типов устройств:

ЗначениеОписание
allПодходит для всех типов устройств. Это значение по умолчанию.
auralПредназначено для речевых синтезаторов. Значение считается устаревшим.
brailleУстройства для чтения шрифта Брайля (рельефно-точечный тактильный шрифт, предназначенный для письма и чтения незрячими и плохо видящими людьми). Значение считается устаревшим.
embossedУстройства, предназначенные для печати шрифта Брайля. Значение считается устаревшим.
handheldПредназначено для портативных устройств (маленький экран и ограниченная полоса пропускания - bandwidth). Значение считается устаревшим.
printПредназначен для печатных страниц и для режима предварительного просмотра печати.
projectionУстройства проекционного типа (проекторы). Значение считается устаревшим.
screenЭкраны компьютера.
speechРечевые синтезаторы, устройства для чтения с экрана (для чтения страниц вслух).
ttyУстройства, которые используют набор символов фиксированной ширины, например, телетайпы или терминалы. Значение считается устаревшим.
tvУстройства телевизионного типа (низкое разрешение, ограниченные возможности прокрутки, возможность передачи звука). Значение считается устаревшим.

Мультимедийные функции

ЗначениеОписание
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Задает высоту области просмотра (используются единицы измерения CSS).
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).
monochromeУказывает количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа.
orientationОпределяет, находится ли область просмотра в режиме альбомной ориентации - экран шире, чем высота, или в портретной ориентации - высота дисплея больше или равна ширине. Для альбомной ориентации используется значение: orientation: landscape, а для портретной и orientation: portrait.
resolutionУказывает разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (dpi), так и в точках на сантиметр (dpcm).
scanУказывает метод сканирования устройства вывода. Применяется для устройств телевизионного типа (tv). Для того, чтобы указать тип развертки устройства, необходимо указать одно из значений: череcстрочная развертка - (interlace), прогрессивная развертка (progressive).
widthЗадает ширину области просмотра (используются единицы измерения CSS).

Мультимедийные функции (Media Queries Level 4)

В "Media Queries Level 4" добавлены следующие новые функции, которые, возможно, будут реализованы в браузерах:

Медиа-запросы, используемые в Bootstrap

Основные медиа-запросы, которые используются в Bootstrap (HTML, CSS и Javascript фреймворк) для создания адаптивных страниц:

/* Large desktop  (минимальная ширина области просмотра 1200px) */ 
@media (min-width: 1200px) { 
код CSS
} 
 
/* Portrait tablet to landscape and desktop (минимальная ширина области просмотра 768px и максимальная ширина 979px) */ 
@media (min-width: 768px) and (max-width: 979px) { 
код CSS
} 
 
/* Landscape phone to portrait tablet (максимальная ширина области просмотра 767px) */ 
@media (max-width: 767px) { 
код CSS
} 
 
/* Landscape phones and down (максимальная ширина области просмотра 480px) */ 
@media (max-width: 480px) { 
код CSS
} 

Настройка области просмотра

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

Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге <head> разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:

<meta name = "viewport" content = "width=device-width, initial-scale = 1">

Если все страницы Вашего сайта адаптированы для просмотра на мобильных устройствах, то размещение вышеуказанного мета тега является обязательным.

Доступные значения:

Значение атрибутаОпределение
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 {background-color: khaki;} /* устанавливаем цвет заднего фона - хаки */

Следующие CSS стили мы будем использовать при печати и предварительном просмотре страницы:

@media print { /* устанавливаем правило для печатных страниц и для режима предварительного просмотра печати */ 
	h2, p {color: #000;} /* групповой селектор устанавливает цвет элементов - черный */
	body {background-color: #FFF; } /* устанавливаем цвет заднего фона - белый */
}

Окончательный файл 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) с документом, используя элемент <link>:

<link rel = "stylesheet" href = "../css_pr_media.css">

HTML разметка примера:

<!DOCTYPE html>
<html>
<head>
<title>Пример использования CSS правила @media</title>
<link rel = "stylesheet" href = "../css_pr_media.css">
</head>
<body>
	<h2>Рапаны</h2>
	<p><b>Рапаны (лат. Rapana)</b> — род хищных брюхоногих моллюсков из семейства Muricidae. Распространены в морях Тихого и Индийского океанов. С 1947 года встречается в Черном море. Длина раковины до 12-15 см. Раковина широкоовальной формы, завиток низкий, последний оборот вздут, серовато-коричневого цвета со спиральными рёбрами и осевыми утолщениями. Активные хищники, питающиеся двустворчатыми мелкими моллюсками, например, мидиями и устрицами, раковины которых они открывают при помощи своей сильной мускульной ноги. Молодые рапаны с помощью своего покрытого зубчиками языка-сверла делают отверстия в раковинах своих жертв и раскрывают их. Обитают на любых типах дна, передвигаясь с помощью мускулистой ноги.</p>
</body>
</html>

Ниже показано как этот пример отображается в браузере, а на изображении как пример отображается в предварительном просмотре печати страницы (стили, которые мы установили для печати):

Пример использования CSS правила @media (изменение CSS стилей при печати страниц).
Пример использования CSS правила @media (изменение CSS стилей при печати страниц).
CSS правила