W3docs
ru
Войти

CSS-правило @media

Используйте @media для применения стилей на основе медиазапросов. Узнайте, как использовать это правило с примерами.

At-правило @media применяет блок стилей только тогда, когда медиазапрос возвращает истину — например, только на экранах уже определённой ширины или только при печати документа. Это основа адаптивного веб-дизайна: один файл стилей, который подстраивается под настольные компьютеры, ноутбуки, планшеты и мобильные телефоны, вместо отдельного сайта для каждого устройства.

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

Как устроен медиазапрос

Медиазапрос состоит из двух частей:

  • Необязательный тип медиа — all, print, screen или speech — определяющий категорию устройства.
  • Одна или несколько медиафункций в скобках, например (min-width: 768px), проверяющих условие: width viewport, его height, ориентацию или разрешение.

Если тип медиа соответствует текущему устройству и каждая функция возвращает истину, стили внутри блока применяются. Медиафункция выглядит как CSS-свойство (имя: значение), но проверяет условие, а не задаёт стиль элементу напрямую.

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

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

Синтаксис

CSS @media

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

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

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

CSS @media code example

<!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>
Попробуйте сами »

Результат

CSS @media несколько запросов

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

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

CSS @media multiple queries example

<!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>
Попробуйте сами »

Объединение условий с логическими операторами

Медиазапросы могут соединять несколько условий:

  • and — все условия должны быть истинны: @media screen and (min-width: 768px).
  • , (запятая) — действует как or; стили применяются, если хотя бы один из запросов, разделённых запятой, выполняется: @media (max-width: 600px), (min-width: 1200px).
  • not — инвертирует весь запрос: @media not all and (monochrome).
  • only — скрывает запрос от очень старых браузеров, не поддерживающих медиафункции; в современных браузерах не имеет эффекта, но его использование безопасно.

Типы медиа

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

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

CSS @media Rule

<!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>
Попробуйте сами »

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

CSS @media Rule

<!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>
Попробуйте сами »

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

Медиафункции проверяют конкретную характеристику устройства или viewport. Безусловно, самыми распространёнными в повседневном адаптивном дизайне являются функции на основе width — min-width и max-width — однако полный список ниже охватывает всё: от ориентации устройства до глубины цвета и механизма ввода. Диапазонные функции (width, height, aspect-ratio, color, resolution, monochrome) также принимают префиксы min- и max-.

ЗначениеОписание
widthШирина viewport.
heightВысота viewport.
orientationОриентация viewport.
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Определяет, как устройство вывода обрабатывает содержимое, выходящее за пределы viewport по оси блока.
overflow-inlineОпределяет, можно ли прокручивать содержимое, выходящее за пределы viewport по строчной оси.
pointerОпределяет, является ли основной механизм ввода указывающим устройством.
resolutionОписывает разрешение устройства вывода.
scriptingОпределяет, доступны ли скрипты.
updateОпределяет, как быстро устройство вывода может изменить отображение содержимого.

Практика

Практика
Каковы функции медиазапросов в CSS?
Каковы функции медиазапросов в CSS?
Was this page helpful?