Медиа-запросы
Медиа-запросы — это функция CSS 3, позволяющая рендерингу контента адаптироваться к различным условиям, таким как разрешение экрана (например, размер экрана мобильного устройства и настольного компьютера). он стал рекомендованным стандартом W3C . В июне 2012 года [1] и является краеугольным камнем технологии адаптивного веб-дизайна (RWD).
История
[ редактировать ]Медиа-запросы были впервые описаны в Хокона Виума Ли в 1994 году. первоначальном предложении CSS [2] но они не стали частью CSS 1 . Рекомендация HTML4 1997 года показывает пример того, как медиа-запросы могут быть добавлены в будущем. [3] В 2000 году W3C начал работу над медиа-запросами, а также над другой схемой поддержки различных устройств: CC/PP . Оба решают одну и ту же проблему, но CC/PP ориентирован на сервер, а медиа-запросы — на браузер. [4] Первый публичный рабочий проект запросов СМИ был опубликован в 2001 году. [5] Уровень 3 медиа-запросов, опубликованный в качестве кандидатской рекомендации 27 июля 2010 г., стал рекомендацией W3C 19 июня 2012 г. Предлагаемые исправления были опубликованы 5 апреля 2022 г. [6]
Медиа-запросы уровня 4, опубликованные в качестве рабочего проекта 9 мая 2017 года, по состоянию на 25 декабря 2021 года представляли собой проект кандидатской рекомендации W3C. [7]
Использование
[ редактировать ]Медиа-запрос состоит из типа мультимедиа и одного или нескольких выражений, включающих функции мультимедиа , которые разрешаются как true, так и false. Результатом запроса является истина, если тип мультимедиа, указанный в медиа-запросе, соответствует типу устройства, на котором отображается документ, и все выражения в медиа-запросе истинны. Если медиа-запрос верен, применяется соответствующая таблица стилей или правила стиля, следуя обычным правилам каскадирования. [8] [9]
Медиа-запросы используют @media CSS «правило».
Примеры
[ редактировать ]Ниже приведены примеры медиазапросов 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» внутри <link> элемент. Значение атрибута «media» указывает, на каком устройстве будет отображаться связанный документ. [10] Типы носителей также могут быть объявлены в XML . инструкциях обработки @import правило, и @media правило. CSS 2 определяет следующие типы мультимедиа: [11]
- все (подходит для всех устройств)
- шрифт Брайля
- рельефный
- портативный
- распечатать
- проекция
- экран
- речь
- телетайп
- ТВ
Тип носителя «все» также можно использовать для указания того, что таблица стилей применяется ко всем типам носителя. [12]
Медиа-функции
[ редактировать ]В следующей таблице представлены медиа-функции, перечисленные в последней рекомендации W3C для медиа-запросов от 6 июня 2007 г. [13]
| Особенность | Ценить | Мин/Макс | Описание |
|---|---|---|---|
color |
целое число | Да | Количество бит на компонент цвета |
color-index |
целое число | Да | Количество записей в таблице поиска цветов |
device-aspect-ratio |
весь | Да | Соотношение сторон |
device-height |
длина | Да | Высота устройства вывода |
device-width |
длина | Да | Ширина выходного устройства |
grid |
целое число | Нет | Верно для устройства на основе сетки |
height |
длина | Да | Высота поверхности рендеринга |
monochrome |
целое число | Да | Количество бит на пиксель в монохромном буфере кадров |
orientation |
«портрет» или «пейзаж» | Нет | Ориентация экрана |
resolution |
разрешение («dpi», «dpcm» или «dppx») | Да | Разрешение |
scan |
«прогрессивный» или «чересстрочный» | Нет | Процесс сканирования типов мультимедиа «телевидение» |
width |
длина | Да | Ширина поверхности рендеринга |
Ссылки
[ редактировать ]- ↑ История публикаций медиа-запросов , 19 июня 2012 г.
- ^ Хокон Виум Ли. «Каскадные таблицы стилей HTML» . Проверено 20 января 2013 г.
- ^ «Основные типы данных HTML» . www.w3.org .
- ^ «Re: Отзыв о медиа-запросах CR от Хокона Виума Лие от 17 июля 2002 г. ( [электронная почта защищена] от июля 2002 г.)» . lists.w3.org .
- ^ «Медиа запросы» . www.w3.org .
- ^ Медиа-запросы, уровень 3
- ^ Медиа-запросы, уровень 4
- ^ «CSS-медиа-запросы» . Сеть разработчиков Mozilla и отдельные участники . Проверено 28 апреля 2017 г.
- ^ «Как создавать медиа-запросы в адаптивном веб-дизайне» . Техреспублика .
- ^ «Тег ссылки HTML» . W3Школы . Проверено 28 апреля 2017 г.
- ^ «Медиа-запросы» . Консорциум Всемирной паутины . Проверено 28 апреля 2017 г.
- ^ «Медиа-запросы» . Консорциум Всемирной паутины . Проверено 28 апреля 2017 г.
- ^ «Медиа-запросы» . Сайтпойнт . Проверено 28 апреля 2017 г.