Медиа запросы (@media) позволяют сделать из одного сайта несколько версий дизайна в зависимости от характеристик устройства, на котором осуществляет просмотр. К примеру, на мобильных устройствах экраны небольшие, а значит для них лучше использовать резиновую или блочную верстку, чтобы повысить читабельность.
Примечание
Медиа запросы не делают несколько версий сайта для конкректных устройств, а позволяют сделать несколько вариантов дизайна за счет применения разных стилей. Сделать разные стили гораздо проще и дешевле, чем делать разные сайты.
Синтаксис CSS @Media
@media тип_устройства and|not|only (медиа_особенности){ ... Описание стилей ... }
Где тип устройства может принимать следующие значения:
- all - для всех типов устройств (по умолчанию используется это значение)
- braille - для устройств Брайля (для чтения слепыми людьми)
- embossed - для принтеров Брайля
- handheld - для смартфонов или портативных устройств
- print - для принтеров
- projection - для проекторов
- screen - для экранов компьютеров, планшетов, смартфонов и т.д.
- speech - для речевых браузеров
- tty - для устройств с фиксированным шагом символов, такие как телетайпы и терминалы
- tv - для телеэкранов
Примечание
Практические все устройства идентифицируют себя как тип screen (смартфоны и планшеты, ноутбуки и настольные компьютеры).
Логические операторы
- and (и) - логическое И. С помощью него можно задать несколько условий и только при условии, что все они будут выполнены, тогда стиль будет применен
- or (или) - логическое ИЛИ. Необходимо, чтобы хотя бы одно из условий выполнилось
- not (не) - логическое отрицание. Условие стоящие за not должно не выполняться
- only - скрыть правило @media от старых браузеров. Новые браузеры просто не заметят этот оператор
Примечание
Запятая воспринимается как оператор or.
Рассмотрим какие есть медиа особенности.
Медиа особенности- aspect-ratio (min-aspect-ratio, max-aspect-ratio) - определяет отношение ширины и высоты области просмотра
- color (min-color, max-color) - определяет количество бит на цвет для устройства
- color-index (min-color-index, max-color-index) - определяет количество цветов, которое устройство может отображать
- device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio) - определяет соотношение сторон экрана устройства через. Записывается через слэш
- device-height (min-device-height, max-device-height) - определяет всю доступную высоту экрана устройства
- device-width (min-device-width, max-device-width) - определяет всю доступную ширину экрана устройства
- grid - отвечает за вывод у устройства. Бывает два вида: сеточный и точечный. Терминалы, дисплей телефона поддерживают только один шрифт, что равносильно значению 1.
- height (min-height, max-height) - высота области просмотра
- width (min-width, max-width) - ширина области просмотра
- orientation ([landscape] | [portrait]) - определяет в каком положение находится экран (альбомном или портретном)
- resolution (min-resolution, max-resolution) - определяет разрешение устройства вывода
Из всех выше описанных медиа особенностей лишь два используются наиболее часто min-width и max-width.
Примеры с медиа запросами
Пример №1. Ограничение на максимальную ширину
@media screen and (max-width: 800px) { ... стили ... }
Например, данный код будет работать для устройств с шириной экрана меньше 800px. Атрибут screen and можно не писать.
Пример №2. Задание диапазона на ширину
@media (max-width: 1024px) and (min-width: 640px) { ... стили ... }
Этот код только будет работать только в случае, если ширина экрана находится в диапазоне от 640 до 1024 пикселей.
Пример №3. Исключение диапазона
@media (min-width: 1024px), (max-width: 640px) { ... стили ... }
Этот код только будет работать только в случае, если ширина экрана меньше 640 пикслей или наоборот больше 1024 пикселей.
Пример №4. Исключение устройства
@media all and (not handheld) { ... стили ... }
Стиль будет работать для всех устройств кроме смартфонов handheld.
Чтобы не создавать путаницу в стилях и облегчить загрузку сайта, файлы со стилем для медиа запросов можно подгружать только в том случае, если это необходимо. Делается это через тег link:
<link rel="stylesheet" media="тип_устройства and|not|only (медиа_особенности)" href="ссылка_на_стиль"> Например: <link rel="stylesheet" media="only screen and (max-width: 800px)" href="mob_style.css">
Читайте также:
• Адаптивная верстка сайта
• Свойство display
• Свойство transform
• Свойство transform-origin
• Свойство border
• Свойство background
• Свойство transition
• Свойство nth-child
• Свойство overflow
• Свойство box-shadow