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

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

История

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

Media Queries Level 4, опубликованный в качестве рабочего проекта 9 мая 2017 года, был проектом рекомендации W3C Candidate по состоянию на 25 декабря 2021 года. [7]

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

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

Примеры

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

@ media screen and ( display-mode : fullscreen ) { /* Код здесь применяется только к экранам в полноэкранном режиме */ }      
@ media all and ( orientation : landscape ) { /* Код здесь применяется только в альбомной ориентации */ }      
@ media screen and ( min-device-width : 500px ) { /* Код здесь применим только к экранам шириной не менее 500 пикселей */ }

Типы носителей

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

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

Медиа-функции

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

ОсобенностьЦенитьМин/МаксОписание
colorцелое числоДаКоличество бит на цветовой компонент
color-indexцелое числоДаКоличество записей в таблице соответствия цветов
device-aspect-ratioцелое число/целое числоДаСоотношение сторон
device-heightдлинаДаВысота выходного устройства
device-widthдлинаДаШирина выходного устройства
gridцелое числоНетВерно для устройства на основе сетки
heightдлинаДаВысота поверхности рендеринга
monochromeцелое числоДаКоличество бит на пиксель в монохромном буфере кадра
orientation«портрет» или «пейзаж»НетОриентация экрана
resolutionразрешение («dpi», «dpcm» или «dppx»)ДаРазрешение
scan«прогрессивный» или «чересстрочный»НетПроцесс сканирования типов медиа "tv"
widthдлинаДаШирина поверхности рендеринга

Ссылки

  1. ^ Media Queries История публикации 19 июня 2012 г.
  2. ^ Хокон Виум Ли. "Каскадные таблицы стилей HTML" . Получено 20 января 2013 г.
  3. ^ "Основные типы данных HTML". www.w3.org .
  4. ^ "Re: Отзыв о Media Queries CR от Хокона Виума Ли от 2002-07-17 (www-style@w3.org от июля 2002)". lists.w3.org .
  5. ^ "Медиа-запросы". www.w3.org .
  6. ^ Медиа-запросы уровня 3
  7. ^ Медиа-запросы уровня 4
  8. ^ "CSS media requests". Mozilla Developer Network и отдельные участники . Получено 28 апреля 2017 г.
  9. ^ «Как создавать медиа-запросы в адаптивном веб-дизайне». TechRepublic .
  10. ^ "HTML link tag". W3Schools . Получено 28 апреля 2017 г. .
  11. ^ "Media Queries". World Wide Web Consortium . Получено 28 апреля 2017 г.
  12. ^ "Media Queries". World Wide Web Consortium . Получено 28 апреля 2017 г.
  13. ^ "Media Queries". Sitepoint . Получено 28 апреля 2017 г. .
  • Рекомендация W3C – Media Queries от 19 июня 2012 г.
  • W3C – спецификации CSS > Медиа-запросы
  • CodeSpot — CSS-медиа-запросы
Получено с "https://en.wikipedia.org/w/index.php?title=Media_queries&oldid=1156906201"