Медиа запросы (@media CSS)

Медиа запросы (@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


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.