правило @mediaCSS3-генератор ☛

@media <тип носителя> and|not|only (<медиа_особенности>){
  Описание стиля
}

all

для всех типов устройств (по умолчанию используется это значение)

braille

для устройств Брайля (для чтения слепыми людьми). Значение считается устаревшим.

embossed

для принтеров Брайля. Значение считается устаревшим.

handheld

для смартфонов или портативных устройств. Значение считается устаревшим.

print

для принтеров

projection

для проекторов. Значение считается устаревшим.

screen

для экранов компьютеров, планшетов, смартфонов и т.д.

speech

для речевых браузеров

tty

для устройств с фиксированным шагом символов, такие как телетайпы и терминалы. Значение считается устаревшим.

tv

для телеэкранов. Значение считается устаревшим.

Примечание:
Практические все устройства идентифицируют себя как тип screen (смартфоны и планшеты, ноутбуки и настольные компьютеры).

and (и)

логическое И. С помощью него можно задать несколько условий и только при условии, что все они будут выполнены, тогда стиль будет применен

or (или)

логическое ИЛИ. Необходимо, чтобы хотя бы одно из условий выполнилось

not (не)

логическое отрицание. Условие стоящие за not должно не выполняться

only

скрыть правило @media от старых браузеров. Новые браузеры просто не заметят этот оператор

Примечание:
Запятая воспринимается как оператор or.

aspect-ratio	Соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Например: aspect-ratio: 5/4 (соотношение пять к четырем).
color	Определяет количество бит на цветовую компоненту устройства вывода. Если устройство не является цветным устройством, то это значение равно нулю. Допускаются только положительные значения. Например, если дисплей использует по 4 бита на красный и синий, а 5 бит на зеленый, то считается, что устройство использует 4 бит на цветовой компонент.
color-index	Количество цветов, которое устройство может отображать. Отрицательные значения не допускаются.
device-aspect-ratio	Соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Например: device-aspect-ratio: 5/4 (соотношение пять к четырем). Значение считается устаревшим.
device-height	Определяет высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим.
device-width	Определяет ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим.
grid	Определяет основано ли выходное устройство на сеточной системе (например, терминал "tty" или дисплей телефона с одним фиксированным шрифтом), в этом случае значение будет равно 1, если устройство растровое, то значение будет равно 0.
height	Задает высоту области просмотра (используются единицы измерения CSS).
max-aspect-ratio	Максимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали.
max-color	Определяет максимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения.
max-color-index	Максимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются.
max-device-aspect-ratio	Масимальное соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Значение считается устаревшим.
max-device-height	Определяет максимальную высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим.
max-device-width	Определяет максимальную ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим.
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	Минимальное соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Значение считается устаревшим.
min-device-height	Определяет минимальную высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим.
min-device-width	Определяет минимальную ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим.
min-height	Задает минимальную высоту области просмотра (используются единицы измерения CSS).
min-monochrome	Указывает минимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа.
min-resolution	Указывает минимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (dpi), так и в точках на сантиметр (dpcm).
min-width	Задает минимальную ширину области просмотра (используются единицы измерения CSS).
monochrome	Указывает количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа.
orientation	Определяет, находится ли область просмотра в режиме альбомной ориентации - экран шире, чем высота, или в портретной ориентации - высота дисплея больше или равна ширине. Для альбомной ориентации используется значение: orientation: landscape, а для портретной и orientation: portrait.
resolution	Указывает разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (dpi), так и в точках на сантиметр (dpcm).
scan	Указывает метод сканирования устройства вывода. Слово сканирование, используемое в этом контексте, не относится к сканеру изображений, например к сканеру, используемому для оцифровки фотографии. Скорее, это означает процесс, посредством которого изображение рисуется на телевизионном экране (или другом устройстве). Для того, чтобы указать тип развертки устройства, необходимо указать одно из значений: череcстрочная развертка - (interlace), прогрессивная развертка (progressive).
width	Задает ширину области просмотра (используются единицы измерения CSS).

Из всех выше описанных медиа особенностей лишь два используются наиболее часто min-width и max-width.

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

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

• scripting (определяет используются ли языки сценариев, такие как JavaScript в текущем документе).
  Значения:
  • enabled (скрипты доступны в текущем документе).
  • initial-only (скрипты доступны только во время первоначальной загрузке страницы, а не после).
  • none (скрипты полностью недоступны в текущем документе).
  
  
• pointer (используется для запроса о наличии и правильности указывающего устройства, такого как мышь. Если устройство имеет несколько механизмов ввода, то функция указателя должна отражать характеристики "первичного" механизма входного сигнала, который определяется браузером пользователя).
  Значения:
  • none (основной механизм ввода устройства не включает в себя указательное устройство).
  • coarse (основным механизмом ввода устройства входит указательное устройство ограниченной точности, например, сенсорные экраны и системы обнаружения движения по типу Kinect - периферийные устройства для Xbox).
  • fine (основной механизм ввода устройства включает в себя точное указывающее устройство, например, мыши, тачпады и устройства для рисования стилусом).
  Проверяя разные устройства, он показывает, что ноутбуки можно выбрать с помощью запроса @media(hover: hover) и (pointer: fine) {}

  @media(hover: hover) and (pointer: fine) {
      nav a:hover {
          background: yellow;
      }
  }
  

• any-pointer (аналогичен pointer, но используется для запроса возможности любого доступного механизма ввода).
  Значения: none | coarse | fine


• hover (используется для запроса на способность пользователя навести курсор на элемент на странице. Если устройство имеет несколько механизмов ввода, то функция должна отражать характеристики "первичного" механизма входного сигнала, который определяется браузером пользователя).
  Значения:
  • none (указывает, что основное указательное устроство не может навести курсор на элемент на странице, например, сенсорные экраны и экраны, которые используют для рисования стилусом).
  • hover (указывает, что основное указательное устроство может навести курсор на элемент на странице, например, мыши и устройства с физической точкой на экране, как контроллер Nintendo для Wii.).
• any-hover (аналогичен hover, но используется для запроса возможности любого доступного механизма наведения).
  Значения: none | hover


• color-gamut (описывает примерный диапазон цветов, которые поддерживаются UA и выходными устройствами).
  Значения:
  • srgb (выходное устройство может поддерживать примерно диапазон sRGB или более).
  • p3 (выходное устройство может поддерживать примерно диапазон, указанный DCIP3 цветового пространства или более).
  • rec2020 (выходное устройство может поддерживать примерно диапазон, указанный в ITU-R рекомендации BT.2020 цветового пространства или более).
  
  
• update (функция средства обновления используется для запроса на способность устройства вывода изменить внешний вид содержимого после его рендеринга).
  Значения:
  • none (макет не может быть обновлен, например, для документов, напечатанных на бумаге).
  • slow (макет может динамически меняться в соответствии с обычными правилами CSS, но выходное устройство не в состоянии достаточно быстро отобразить изменения, чтобы восприниматься как плавная анимация, например: e-ink экраны).
  • fast (макет может динамически изменяться в соответствии с обычными правилами CSS и выходное устройство не ограничено в скорости, поэтому такие эффекты как CSS анимация могут быть использованы, например: экраны компьютера.).
  
  
• overflow-block (определяет как выходные устройства обрабатывают содержимое, которое не помещается в область просмотра по оси блока)
  Значения:
  • none (любое переполнение контента просто не отображается, например, рекламные щиты).
  • scroll (позоляет пользователю прокрутить содержание, например, экраны компьютеров).
  • optional-paged (позволяет пользователям прокрутить переполненное содержимое, например, слайд-шоу).
  • paged (содержимое разделено на отдельные страницы, содержимое, выходящее за пределы одной страницы в оси блока отображается на следующей странице, например, принтеры или устройства для чтения).
  
  
• overflow-inline (описывает поведение устройства, когда содержимое превышает начальный содержащий блок по inline оси.)
  Значения:
  • none (любое переполнение контента просто не отображается).
  • scroll (позоляет пользователю прокрутить содержание).

Подключение медиазапросов с использованием тега <link>

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

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

Обратите внимание, что в этом случае используется в качестве значения атрибута media тот же синтаксис, что и при использовании правила @media css3.

Подключение медиазапросов с использованием тега <style>

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

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

<style media =  "mediatype and | not | only (media function)">
	...код CSS 
</style>

2. Используя CSS правило @media внутри HTML тега style:

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

Подключение медиазапросов с использованием правила @import

Кроме того, Вы можете использовать правило @import, которое позволяет копировать стили из других CSS файлов:

1. импортируем содержимое файла css, который предназначается для устройств с разрешением экрана, находящегося в диапозоне от 481 пикселей до 768 пикселей

@import url("main.css") (min-width:481px) and (max-width:768px);

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

@import url("print.css") print;

3. импортируем содержимое файла css, который предназначается для устройств проекционного типа и телевизионного типа

@import url("protv.css") projection, tv;

4. импортируем содержимое файла css, который предназначается для экранов компьютера И альбомной ориентации

@import url("file.css") screen and (orientation:landscape);

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

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

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

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

<meta 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 (пользователь может увеличивать масштаб).

@media screen and (max-width: 800px) {
...
стили
...
}

@media (max-width: 1024px) and (min-width: 640px) {
...
стили
...
}

@media (min-width: 1024px), (max-width: 640px) {
...
стили
...
}

@media all and (not handheld) {
стили
...
}

<link rel="stylesheet" media="тип_устройства and|not|only (медиа_особенности)" href="ссылка_на_стиль" />

<link rel="stylesheet" media="only screen and (max-width: 800px)" href="mob_style.css" />

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>@media</title>
  <link media="print" rel="stylesheet" href="print.css">
  <link media="screen" rel="stylesheet" href="main.css">
 </head>
 <body>
  <p>...</p>
 </body>
</html>