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

Медиа-запросы это особенность CSS 3 позволяя рендерингу контента адаптироваться к различным условиям, таким как разрешение экрана (например, размер экрана мобильного устройства и компьютера). Это стало W3C рекомендуется стандарт в июне 2012 г.,[1] и является краеугольной технологией адаптивный веб-дизайн (Задний привод).

История

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

использование

Медиа-запрос состоит из тип СМИ и одно или несколько выражений, включающих медиа-особенности, которые принимают значение true или false. Результатом запроса является истина, если тип носителя, указанный в медиазапросе, соответствует типу устройства, на котором отображается документ, и все выражения в медиазапросе истинны. Если медиазапрос верен, применяется соответствующая таблица стилей или правила стиля в соответствии с обычными правилами каскадирования.[6][7]Медиа-запросы используют @средства массовой информации CSS "at-правило".

Примеры

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

@средства массовой информации экран и (Режим отображения: полноэкранный) {  / * Код здесь применим только к экранам в полноэкранном режиме * /}
@средства массовой информации все и (ориентация: пейзаж) {  / * Код здесь применяется только в альбомной ориентации * /}
@средства массовой информации экран и (минимальная ширина устройства: 500 пикселей) {  / * Код здесь применяется только к экранам шириной не менее 500 пикселей * /}

Типы медиа

Тип носителя может быть объявлен в заголовке HTML документ, используя атрибут "media" внутри <связь> элемент. Значение атрибута media указывает, на каком устройстве будет отображаться связанный документ.[8] Типы мультимедиа также могут быть объявлены в XML инструкции по обработке, @импорт at-rule, и @средства массовой информации ат-правило. CSS 2 определяет следующие типы носителей:[9]

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

Особенности СМИ

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

ОсобенностьЦенитьМин МаксОписание
цветцелое числодаколичество бит на компонент цвета
цветовой индексцелое числодаколичество записей в таблице поиска цветов
соотношение сторон устройствацелое / целое числодасоотношение сторон
высота устройствадлинадавысота устройства вывода
ширина устройствадлинадаширина устройства вывода
сеткацелое числоНетверно для устройства на основе сетки
высотадлинадавысота поверхности рендеринга
монохромныйцелое числодаколичество бит на пиксель в буфере монохромного кадра
ориентация"портрет" или "пейзаж"Неториентация экрана
разрешающая способностьразрешение ("dpi", "dpcm" или "dppx")даразрешающая способность
сканировать"прогрессивный" или "чересстрочный"Нетпроцесс сканирования медиа-типов "тв"
ширинадлинадаширина поверхности рендеринга

Рекомендации

  1. ^ История публикаций медиа-запросов 19 июня 2012 г.
  2. ^ Хокон Виум Ли. «Каскадные таблицы стилей HTML». Получено 20 января 2013.
  3. ^ «Основные типы данных HTML». www.w3.org.
  4. ^ "Re: Отзыв Хокона Виума Ли о запросах СМИ на CR от 17 июля 2002 г. ([email protected] с июля 2002 г.)". lists.w3.org.
  5. ^ «Медиа-запросы». www.w3.org.
  6. ^ «Медиа-запросы CSS». Сеть разработчиков Mozilla и отдельные участники. Получено 28 апреля 2017.
  7. ^ «Как создавать медиа-запросы в адаптивном веб-дизайне». TechRepublic.
  8. ^ "HTML-тег ссылки". W3Школы. Получено 28 апреля 2017.
  9. ^ "Медиа-запросы". Консорциум World Wide Web. Получено 28 апреля 2017.
  10. ^ "Медиа-запросы". Консорциум World Wide Web. Получено 28 апреля 2017.
  11. ^ "Медиа-запросы". Sitepoint. Получено 28 апреля 2017.

внешняя ссылка