CSS медиа-запросы

CSS2 ввел типы медиа

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

Например: у вас может быть набор правил стиля для экрана компьютера, набор правил для принтера, набор правил для портативных устройств, даже набор правил для телевизора и так далее.

К сожалению, кроме типа медиа для печати, эти типы медиа никогда не получили массовой поддержки от устройств.

CSS3 ввел медиа-запросы

Медиа-запросы CSS3 расширяют концепцию типов медиа CSS2: они не ищут тип устройства, а сосредотачиваются на возможностях устройства.

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

  • Ширина и высота видимой области
  • Ширина и высота устройства
  • Оrientierung (в горизонтальном или вертикальном режиме平板ных компьютеров/смартфонов)
  • Разрешение

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

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

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

Свойство
@media 21.0 9.0 3.5 4.0 9.0

Синтаксис медиа-запросов

Медиа-запросы состоят из одного типа медиа и могут включать один или несколько выражений, которые могут быть интерпретированы как true или false.

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

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

Если вы не используете операторы not или only, тип медиа является опциональным и по умолчанию all Тип.

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

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 типы медиа

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

Простая пример медиа-запросов

Одним из способов использования медиа-запросов является наличие резервного раздела CSS в таблице стилей.

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

Пример

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

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

Ниже приведен пример меню, которое плавает на левом краю страницы (если ширина видимой области меньше 480 пикселей, меню будет находится вверху контента):

Пример

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

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

Больше примеров медиа-запросов

Для получения更多信息 о медиа-запросах, пожалуйста, перейдите на следующую страницу:Примеры CSS MQ.

Руководство CSS @media

Полное описание всех типов媒体 и свойств/выражений можно найти в нашем Правило @media в справочнике CSS.