CSS @media правило

Определение и использование

@media правила используются в медиа-запросах для применения различных стилей к различным типам СМИ / устройствам.

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

  • Ширина и высота области просмотра
  • Ширина и высота устройства
  • Направление (в горизонтальном или вертикальном режиме телефона или планшета?)
  • Разрешение

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

Вы также можете использовать медиа-запросы для определения стилей, которые применяются только к документам для печати или экранным читателям (mediatype: print, screen или speech).

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

См. также:

Учебник CSS:Медиа-запросы CSS

Учебник CSS:Примеры CSS медиа-запросов

Учебник RWD:Реализация адаптивного веб-дизайна через медиа-запросы

Руководство JavaScript:Метод window.matchMedia()

Ин实例

Пример 1

Если ширина окна браузера составляет 600px или меньше, измените цвет фона элемента <body> на «светло-голубой»:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

попробуйте сами

Более много примеров TIY можно найти в нижней части страницы.

Грамматика CSS

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

Значение ключевых слов not, only и and:

not: ключевое слово not меняет смысл всего запроса на媒体.

only: ключевое слово only предотвращает применение старыми браузерами指定的 стилей, которые не поддерживают медиа-запросы с медиа-характеристиками. Оно не влияет на moderne браузеры.

и: ключевые слова and kombiniruyut медиа-характеристики с типом媒体 или другими медиа-характеристиками.

Они все необязательны. Но если используется not или only, то также необходимо указать тип媒体.

Вы также можете использовать различные таблицы стилей для различных медиа, например:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
...

Тип媒体

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

Медиа-характеристики

Значение Описание
any-hover

Есть ли доступные механизмы ввода, которые позволяют пользователю悬停在元素上 (например, мышь)?

Добавлен в Media Queries Level 4.
any-pointer

Среди доступных механизмов ввода есть ли какие-либо устройства указателей, и если да, то какова их точность?

Добавлен в Media Queries Level 4.
aspect-ratio Соотношение ширины к высоте области просмотра (viewport).
color

Битное значение каждого пикселя на выходном устройстве,常见的 значения - 8, 16, 32 бита.

Значение 0, если устройство не поддерживает цветное отображение.
color-gamut

Область цветового пространства, поддерживаемого приблизительно пользователем агента и выходным устройством.

Добавлен в Media Queries Level 4.
color-index

Количество записей в таблице поиска цветов (color lookup table) устройства.

Значение 0, если устройство не использует таблицу поиска цветов.
device-aspect-ratio

Соотношение ширины к высоте устройства.

Уже弃нуто в Media Queries Level 4.
device-height

Высота поверхности рендеринга устройства (например, экрана).

Уже弃нуто в Media Queries Level 4.
device-width

Ширина поверхности рендеринга устройства (например, экрана).

Уже弃нуто в Media Queries Level 4.
display-mode

Режим отображения приложения, как указано в成员е display в манифесте web app.

Определено в спецификации Web App Manifest.
forced-colors

Ограничивает ли пользовательский агент палитру цветов?

Добавлен в Media Queries Level 5.
grid Использует ли выходное устройство сетчатый экран или матричный экран?
height Высота области просмотра (viewport).
hover

Позволяет ли основная система ввода пользователю наводить курсор на элемент?

Добавлен в Media Queries Level 4.
inverted-colors

Включена ли инверсия цветов в браузере или на уровне операционной системы.

Добавлен в Media Queries Level 5.
light-level

Уровень текущей световой среды.

Добавлен в Media Queries Level 5.
max-aspect-ratio Максимальное соотношение ширины к высоте области отображения.
max-color Максимальное количество бит для каждой компоненты цвета на выходном устройстве.
max-color-index Максимальное количество цветов, которые может отображать устройство.
max-height Максимальная высота области отображения, например, окна браузера.
max-monochrome Максимальное количество бит для каждого "цвета" на монохромных (грayscale) устройствах.
max-resolution Максимальное разрешение устройства, выраженное в dpi или dpcm.
max-width Максимальная ширина области отображения, например, окна браузера.
min-aspect-ratio Минимальное соотношение ширины к высоте области отображения.
min-color Минимальное количество бит для каждой компоненты цвета на выходном устройстве.
min-color-index Минимальное количество цветов, которые может отображать устройство.
min-height Минимальная высота области отображения, например, окна браузера.
min-monochrome Минимальное количество бит для каждого "цвета" на монохромных (грayscale) устройствах.
min-resolution Низшая разрешающая способность устройства, измеряемая в dpi или dpcm.
min-width Минимальная ширина области отображения, например, окно браузера.
monochrome

Битовая глубина каждого пикселя в монохромном буфере устройства вывода.

Если устройство не имеет черно-белого экрана, то значение равно 0.
orientation Направление вращения окна просмотра (ландскей или портрет).
overflow-block

Как устройство вывода обрабатывает содержимое, вылезающее за пределы окна просмотра по блоковому направлению?

Добавлен в Media Queries Level 4.
overflow-inline

Может ли содержимое, вылезающее за пределы окна просмотра по внутреннему направлению, скользить?

Добавлен в Media Queries Level 4.
pointer

Основной ввод — это устройство указателя? Если да, то какова его точность?

Добавлен в Media Queries Level 4.
prefers-color-scheme

Определяет, предпочитает ли пользователь световую или темную схему цветов.

Добавлен в Media Queries Level 5.
prefers-contrast

Определяет, требует ли пользователь повышения или понижения контрастности между близкими цветами.

Добавлен в Media Queries Level 5.
prefers-reduced-motion

Пользователь хочет, чтобы на странице было меньше динамических эффектов?

Добавлен в Media Queries Level 5.
prefers-reduced-transparency

Пользователь предпочитает более низкую прозрачность?

Добавлен в Media Queries Level 5.
resolution Разрешение устройства вывода, измеряемое в dpi или dpcm.
scan Процесс сканирования устройства вывода (например, телевизора).
scripting

Определяет, доступен ли скрипт (например, JavaScript).

Добавлен в Media Queries Level 5.
update

Частота обновления контента устройства вывода.

Добавлен в Media Queries Level 4.
width Ширина окна просмотра (viewport).

Более примеров

Пример 2

Скрыть элемент, когда ширина браузера составляет 600 пикселей или меньше:

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

попробуйте сами

Пример 3

Если ширина окна просмотра составляет 800 пикселей или больше, установите цвет фона с помощью медиа-запросов в светло-фиолетовый; если ширина окна просмотра介于 400 и 799 пикселями, установите цвет фона с помощью медиа-запросов в светло-зеленый. Если ширина окна просмотра меньше 400 пикселей, цвет фона будет светло-голубым:

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}

попробуйте сами

Пример 4

Создайте адаптивное меню навигации (горизонтально отображается на больших экранах, вертикально на маленьких экранах):

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

попробуйте сами

пример 5

Используйте media queries для создания адаптивной колонки макета:

/* На экранах с шириной 992px или меньше, перейти от четырех колонок к двум */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* На экранах с шириной до или равной 600 пикселей, сделать колонки chồngующимися, а не расположенными lado a lado */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

попробуйте сами

пример 6

Используйте media queries для создания адаптивного веб-сайта:

попробуйте сами

пример 7

media queries также можно использовать для изменения макета страницы в зависимости от направления браузера. Вы можете написать набор свойств CSS, которые применяются только когда ширина окна браузера больше его высоты (т.е. в режиме "портрет"方向).

Если направление находится в режиме портретного изображения, используйте фоновый цвет светло-голубой:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

попробуйте сами

пример 8

Используйте media queries для установки цвета текста на зеленый при отображении документа на экране и черный при печати:

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

попробуйте сами

пример 9

список, разделенный запятыми: используйте запятую для добавления другого запроса к существующему запросу media (его поведение подобно оператору OR):

/* Когда ширина между 600px и 900px или больше 1100px - изменить вид <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

попробуйте сами

поддержка браузеров

числа в таблице указывают на первую версию браузера, которая полностью поддерживает правила @media.

Chrome IE / Edge Firefox Safari Opera
21 9 3.5 4.0 9