Медиа-запросы

Медиа-запросы - это функция CSS 3, позволяющая приспосабливать рендеринг контента к различным условиям, таким как разрешение экрана (например, размер экрана мобильного устройства и рабочего стола). Он стал рекомендованным W3C стандартом в июне 2012 года и является краеугольным камнем технологии адаптивного веб-дизайна (RWD).

• 1 История
• 2 Использование
• 3 Примеры
• 4 типа медиа
• 5 Медиа-особенности
• 6 Ссылки
• 7 Внешние ссылки

Медиа-запросы были впервые представлены в первоначальном предложении CSS Хокона Виума Ли в 1994 году, но они не стали частью CSS 1. HTML4 Рекомендация от 1997 показывает пример того, как запросы средств массовой информации могут быть добавлены в будущем. В 2000 году W3C начал работу над медиа-запросами, а также над другой схемой поддержки различных устройств: CC / PP. Эти два решения решают одну и ту же проблему, но CC / PP ориентирован на сервер, а медиа-запросы ориентированы на браузер. Первый общедоступный рабочий проект для медиа-запросов был опубликован в 2001 году, а спецификация стала Рекомендацией W3C в 2012 году после того, как браузеры добавили поддержку.

Медиа-запрос состоит из медиа-типа и одного или нескольких выражений, включающих медиа-функции, которые разрешаются либо в истинное, либо в ложное. Результатом запроса является истина, если тип мультимедиа, указанный в мультимедийном запросе, соответствует типу устройства, на котором отображается документ, и все выражения в мультимедийном запросе истинны. Если медиазапрос верен, применяется соответствующая таблица стилей или правила стиля в соответствии с обычными правилами каскадирования. Медиа-запросы используют «at-rule» CSS. @media

Ниже приведены примеры медиа-запросов CSS:

@media screen and (display-mode: fullscreen) { /* Code in here only applies to screens in fullscreen */ }

@media all and (orientation: landscape) { /* Code in here only applies in landscape orientation */ }

@media screen and (min-device-width: 500px) { /* Code in here only applies to screens equal or greater than 500 pixels wide */ }

Тип мультимедиа может быть объявлен в заголовке HTML- документа с помощью атрибута «media» внутри элемента. Значение атрибута «media» указывает, на каком устройстве будет отображаться связанный документ. Типы мультимедиа также могут быть объявлены в инструкциях обработки XML, в правилах at и at. CSS 2 определяет следующие типы мультимедиа: lt;linkgt; @import@media

• все (подходит для всех устройств)
• шрифт Брайля
• тисненый
• портативный
• Распечатать
• проекция
• экран
• речь
• tty
• Телевизор

Тип мультимедиа «все» также может использоваться, чтобы указать, что таблица стилей применяется ко всем типам мультимедиа.

В следующей таблице представлены медиа-функции, перечисленные в последней рекомендации W3C для медиа-запросов от 6 июня 2007 года.

• W3C - Рекомендация Media Queries, 19 июня 2012 г.
• W3C - спецификации CSSgt; Медиа-запросы
• CodeSpot - медиа-запросы CSS