Медиа-запросы - это функция CSS 3, позволяющая приспосабливать рендеринг контента к различным условиям, таким как разрешение экрана (например, размер экрана мобильного устройства и компьютера). Он стал рекомендованным W3C стандартом в июне 2012 года [1] и является краеугольным камнем технологии адаптивного веб-дизайна (RWD).
История [ править ]
Медиа-запросы были впервые представлены в первоначальном предложении CSS Хокона Виума Ли в 1994 году [2], но они не стали частью CSS 1 . HTML4 Рекомендация от 1997 показывает пример того , как запросы средств массовой информации могут быть добавлены в будущем. [3] В 2000 году W3C начал работу над медиа-запросами, а также над другой схемой поддержки различных устройств: CC / PP . Эти два решения решают одну и ту же проблему, но CC / PP ориентирован на сервер, а медиа-запросы ориентированы на браузер. [4] Первый общедоступный рабочий проект для медиа-запросов был опубликован в 2001 году, [5] и спецификация стала Рекомендацией W3C в 2012 году после того, как браузеры добавили поддержку.
Использование [ править ]
Медиа-запрос состоит из медиа-типа и одного или нескольких выражений, включающих медиа-функции , которые разрешаются либо в истинное, либо в ложное. Результатом запроса является истина, если тип мультимедиа, указанный в мультимедийном запросе, соответствует типу устройства, на котором отображается документ, и все выражения в мультимедийном запросе истинны. Если медиазапрос верен, применяется соответствующая таблица стилей или правила стиля в соответствии с обычными правилами каскадирования. [6] [7]
Медиа-запросы используют «at-правило» CSS.@media
Примеры [ править ]
Ниже приведены примеры медиа-запросов CSS:
@ media screen и ( display-mode : fullscreen ) { / * Код здесь применяется только к экранам в полноэкранном режиме * / }@ media all и ( ориентация : альбомная ) { / * Код здесь применяется только в альбомной ориентации * / }@ media screen и ( min-device-width : 500px ) { / * Приведенный здесь код применяется только к экранам шириной не менее 500 пикселей * / }Типы носителей [ править ]
Тип мультимедиа может быть объявлен в заголовке HTML- документа с помощью атрибута «media» внутри элемента. Значение атрибута «media» указывает, на каком устройстве будет отображаться связанный документ. [8] Типы мультимедиа также могут быть объявлены в инструкциях обработки XML , в правилах at и at. CSS 2 определяет следующие типы мультимедиа: [9]<link>@import@media
- все (подходит для всех устройств)
- шрифт Брайля
- тисненый
- портативный
- Распечатать
- проекция
- экран
- речь
- tty
- Телевизор
Тип мультимедиа «все» также может использоваться, чтобы указать, что таблица стилей применяется ко всем типам мультимедиа. [10]
Медиа-функции [ править ]
В следующей таблице представлены медиа-функции, перечисленные в последней рекомендации W3C для медиа-запросов от 6 июня 2007 г. [11]
| Характерная черта | Значение | Мин Макс | Описание |
|---|---|---|---|
color | целое число | да | Количество бит на компонент цвета |
color-index | целое число | да | Количество записей в поисковой таблице цветов |
device-aspect-ratio | целое / целое число | да | Соотношение сторон |
device-height | длина | да | Высота устройства вывода |
device-width | длина | да | Ширина устройства вывода |
grid | целое число | Нет | Верно для устройства на основе сетки |
height | длина | да | Высота поверхности рендеринга |
monochrome | целое число | да | Количество бит на пиксель в буфере монохромного кадра |
orientation | "портрет" или "пейзаж" | Нет | Ориентация экрана |
resolution | разрешение ("dpi", "dpcm" или "dppx") | да | разрешение |
scan | "прогрессивный" или "чересстрочный" | Нет | Процесс сканирования медиа-типов "тв" |
width | длина | да | Ширина поверхности рендеринга |
Ссылки [ править ]
- ↑ Media Queries Publication History, 19 июня 2012 г.
- ^ Хокон Виум Ли. «Каскадные таблицы стилей HTML» . Проверено 20 января 2013 года . CS1 maint: обескураженный параметр ( ссылка )
- ^ «Основные типы данных HTML» . www.w3.org .
- ^ "Re: Отзыв о медиа-запросах CR от Хокона Виума Ли от 17 июля 2002 г. ([email protected] с июля 2002 г.)" . lists.w3.org .
- ^ «Медиа-запросы» . www.w3.org .
- ^ «CSS медиа-запросы» . Сеть разработчиков Mozilla и отдельные участники . Проверено 28 апреля 2017 года . CS1 maint: обескураженный параметр ( ссылка )
- ^ «Как создавать медиа-запросы в адаптивном веб-дизайне» . TechRepublic .
- ^ "HTML тег ссылки" . W3Schools . Проверено 28 апреля 2017 года . CS1 maint: обескураженный параметр ( ссылка )
- ^ «Медиа-запросы» . Консорциум World Wide Web . Проверено 28 апреля 2017 года . CS1 maint: обескураженный параметр ( ссылка )
- ^ «Медиа-запросы» . Консорциум World Wide Web . Проверено 28 апреля 2017 года . CS1 maint: обескураженный параметр ( ссылка )
- ^ «Медиа-запросы» . Sitepoint . Проверено 28 апреля 2017 года . CS1 maint: обескураженный параметр ( ссылка )
Внешние ссылки [ править ]
- W3C - Рекомендация Media Queries, 19 июня 2012 г.
- W3C - спецификации CSS> Медиа-запросы
- CodeSpot - медиа-запросы CSS
