CSS @media

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

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

Помимо типов медиа, существуют медиа-функции, которые имеют имена и принимают определённые значения, как и свойства. Однако они используются для проверки условий внутри медиа-запросов, а не для прямой стилизации элементов.

Медиа-запросы используются для проверки следующих параметров:

ширины и высоты области просмотра (viewport)
ориентации
разрешения

В JavaScript интерфейс CSSMediaRule представляет одно правило @media и может использоваться для доступа к правилам, созданным с помощью @media.

Синтаксис

CSS @media

css

@media <media-query> {
  /* styles */
}

Медиа-запросы могут объединять несколько условий с помощью логических операторов: and, not, only, а также запятой (,).

Пример правила @media:

Пример кода CSS @media

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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) {
        body {
          background-color: #333;
        }
      }
    </style>
  </head>
  <body>
    <h2>@media rule example</h2>
    <p>Resize the browser to see the effect.</p>
    <p>The background color changes based on the viewport width: light blue for screens up to 411px, light gray for 768px and wider, and dark gray for screens between 450px and 962px, or 1366px and wider.</p>
  </body>
</html>

Try it Yourself »

Результат

CSS @media multiple queries

В следующем примере, когда ширина окна браузера составляет от 500 до 800 пикселей или более 1000 пикселей, внешний вид элемента <div> изменяется. Измените размер окна браузера, чтобы увидеть эффект.

Пример правила @media с изменением внешнего вида `<div>`:

Пример нескольких запросов CSS @media

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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 rule example</h2>
    <p>Media queries set the background-color to grey if the viewport is 600 pixels wide or wider, to green if the viewport is between 200 and 599 pixels wide. If the viewport is smaller than 200 pixels, the background-color is blue.</p>
    <h3>Change the appearance of DIV on different screen sizes</h3>
    <div class="box">DIV</div>
  </body>
</html>

Try it Yourself »

Типы медиа

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

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

Правило CSS @media

html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <style>
      @media (max-width: 767px) {
        .hide-mobile {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <h1>Hi</h1>
    <p>There is some text for example.</p>
    <p class="hide-mobile">This text will be hidden on large devices.</p>
    <p>There is some text for example.</p>
  </body>
</html>

Try it Yourself »

Пример использования медиа-запроса для изменения цвета фона контента на разных устройствах.

Правило CSS @media

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @media screen and (max-width: 767px) {
        .content {
          background-color: lightblue;
          padding: 30px;
        }
      }
      @media screen and (min-width: 768px) {
        .content {
          background-color: pink;
          padding: 10px;
        }
      }
      @media screen and (min-width: 800px) {
        .content {
          background-color: lightgreen;
          color: white;
          padding: 50px;
        }
      }
    </style>
  </head>
  <body>
    <div class="content">
      <h2>Resize the browser to see the effect.</h2>
      <p>
        CSS is a rule-based language, which means that you define
        rules specifying groups of styles applying to particular
        elements or groups of elements on the web page.
      </p>
    </div>
  </body>
</html>

Try it Yourself »

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

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

Практика

Каковы функции медиа-запросов в CSS?

Их можно использовать для проверки высоты и ширины области просмотра.Их можно использовать для проверки ширины и высоты устройства.Их можно использовать для применения специальных стилей для пользователей с нарушениями цветовосприятия.Они могут определять ориентацию устройства (альбомная или портретная).Они могут проверять разрешение устройства.Они могут проверять тип браузера, используемого для просмотра страницы.

CSS @media ​

Синтаксис ​

Пример правила @media: ​

Результат ​

Пример правила @media с изменением внешнего вида <div>: ​

Типы медиа ​

Пример использования медиа-запроса для скрытия элемента на очень маленьких устройствах: ​

Пример использования медиа-запроса для изменения цвета фона контента на разных устройствах. ​

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

Практика ​

CSS @media

Синтаксис

Пример правила @media:

Результат

Пример правила @media с изменением внешнего вида `<div>`:

Типы медиа

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

Пример использования медиа-запроса для изменения цвета фона контента на разных устройствах.

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

Практика