CSS правило @media

Правило @media определяет набор стилей, который применяется только к конкретному типу носителя.

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

Кроме медиа-типов, есть еще медиа-функции, которые имеют названия и принимают значения подобно свойствам. Но есть различия между свойствами и функциями:

  • Свойства не могут работать без значений, а при функциях значения могут и не использоваться.
  • Функции, в отличии от свойств, могут иметь только одно значение.

Медиа-запросы используются для:

  • Ширины и высоты окна просмотра
  • Ширины и высоты устройства
  • Ориентации экрана
  • Разрешения экрана
Значение по умолчанию all
Применяется К конкретным медиа-типам.
Наследуется Нет
Анимируемое Да
Версия Media Queries, CSS2
DOM синтаксис object.style.@media = "screen and (min-width: 500px)";

Синтаксис

@media: media-type (and media-query-feature);

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background-color: #1c87c9;
      }
      @media screen and (max-width: 411px) {
      body {
      background-color: #cce5ff;
      }
      }
      @media screen and (min-width: 768px) {
      body {
      background-color: #eee;
      }
      }
      @media screen and (max-width: 962px) and (min-width: 450px), (min-width: 1366px) {
      background-color: #333;
      }
    </style>
  </head>
  <body>
    <h2>Пример правила @media</h2>
    <p>Измените размер браузера чтобы увидеть эффект.</p>
    <p>Медиа-запросы устанавливают светло-серый как фоновый цвет, если окно просмотра имеет ширину 600 px или больше, а если окно просмотра имеет ширину от 200 до 599 px, то устанавливается зеленый цвет. Если окно просмотра меньше 200 px, фоновый цвет будет синим.</p>
  </body>
</html>

В следующем примере, где браузер имеет ширину в пределах от 500 и 800 px или больше 1000px, внешний вид <div> элемента меняется:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background-color: #1c87c9;
      }
      @media screen and (min-width: 200px) {
      body {
      background-color: #8ebf42;
      }
      }
      @media screen and (min-width: 600px) {
      body {
      background-color: #ccc;
      }
      }
      @media screen and (max-width: 800px) and (min-width: 500px), (min-width: 1000px) {
      div.box {
      font-size: 50px;
      padding: 50px;
      border: 8px solid #000;
      background: #eee;
      }
      }
    </style>
  </head>
  <body>
    <h2>Пример правила @media</h2>
    <p>Медиа-запросы устанавливают светло-серый как фоновый цвет, если окно просмотра имеет ширину 600 px или больше, а если окно просмотра имеет ширину от 200 до 599 px, то устанавливается зеленый цвет. Если окно просмотра меньше 200 px, фоновый цвет будет синим.</p>
    <h3>Измените внешний вид DIV при разных размерах экрана</h3>
    <div class="box">DIV</div>
  </body>
</html>

Медиа-типы

Значение Описание
all Используется для всех устройств. Значение по умолчанию.
print Используется для принтеров.
screen Используется для компьютеров с цветным дисплеем.
speech Используется для речевых синтезаторов.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Медиа-функции

Значение Описание
width Ширина окна просмотра. css2
height Высота окна просмотра.
orientation Ориентация окна просмотра.
scan Сканирование окна просмотра.
aspect-ratio Соотношение ширины и высоты.
grid Определяет, основано ли выходное устройство на сеточной системе или на растровой графике.
color Определяет количество бит на цветовой компонент выходного устройства. Если устройство не является цветным, значением будет 0.
color-gamut Примерная шкала цветов, поддерживаемая пользовательским агентом и выходным устройством.
color-index Определяет количество компонентов таблицы цветов выходного устройства. Если устройство не использует таблицу цветов, значением будет 0.
inverted-colors Определяет, может ли браузер или операционная система инвертировать цвета.
hover Определяет, дает ли возможность первичный механизм ввода навести указатель мыши на элемент.
any-hover Определяет, дает ли возможность доступный механизм ввода навести указатель мыши на элемент.
any-pointer Определяет, является ли доступный механизм ввода указывающим устройством или нет.
light-level Определяет уровень яркости.
max-aspect-ratio Максимальное соотношение ширины и высоты отображаемой области.
max-color Максимальное количество бит на каждый цветовой компонент выходного устройства.
max-color-index Максимальное количество цветов, которое может отобразить браузер.
max-height Максимальная высота отображаемой области.
max-monochrome Максимальное количество бит на цвет на монохромном устройстве.
max-resolution Максимальное разрешение устройства.
max-width Максимальная ширина отображаемой области.
min-aspect-ratio Минимальное соотношение ширины и высоты отображаемой области.
min-color Минимальное количество бит на каждый цветовой компонент выходного устройства.
min-color-index Минимальное количество цветов, которое может отобразить браузер.
min-height Минимальная высота отображаемой области.
min-monochrome Минимальное количество бит на цвет на монохромном устройстве.
min-resolution Минимальное разрешение устройства.
min-width Минимальная ширина отображаемой области.
monochrome Определяет количество бит на пиксель. Если устройство не является монохромным, значением будет 0.
orientation Ориентация окна просмотра.
overflow-block Определяет, каким образом выходное устройство контролирует контент, который выходит за границы окна просмотра по направлению оси блока.
overflow-inline Определяет, может ли прокручиваться контент, который выходит за границы окна просмотра по направлению строчной оси.
pointer Определяет, является ли первичный механизм ввода указывающим устройством.
resolution Определяет разрешение выходного устройства.
scripting Определяет, доступны ли языки сценариев.
update Определяет, как быстро выходное устройство может изменить внешний вид контента.

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

1.0+ v 1.0+ 1.3+ 9.2+


Считаете ли это полезным?

Похожие статьи