CSS
Запросы мультимедиа
Поиск…
Синтаксис
- @media [not | only] mediatype и (медиа-функция) {/ * Правила CSS для применения * /}
параметры
| параметр | подробности |
|---|---|
mediatype | (Необязательно) Это тип носителя. Может быть что - нибудь в пределах all к screen . |
not | (Необязательно) Не применяется CSS для данного типа носителя и применяется ко всему остальному. |
media feature | Логика для определения прецедента для CSS. Варианты, описанные ниже. |
| Медиа-функция | подробности |
aspect-ratio | Описывает соотношение сторон целевой области отображения устройства вывода. |
color | Указывает количество бит на цветной компонент устройства вывода. Если устройство не является цветным устройством, это значение равно нулю. |
color-index | Указывает количество записей в таблице поиска цветов для устройства вывода. |
grid | Определяет, является ли устройство вывода устройством сетки или растровым устройством. |
height | Функция носителя высоты описывает высоту поверхности визуализации выходного устройства. |
max-width | CSS не будет применяться на ширине экрана шире, чем указано. |
min-width | CSS не будет применяться на ширине экрана, уже указанной выше. |
max-height | CSS не будет применяться на высоте экрана выше указанного. |
min-height | CSS не будет применяться на высоте экрана, меньшей указанной. |
monochrome | Указывает количество бит на пиксель на монохромном (серого) устройстве. |
orientation | CSS будет отображаться только в том случае, если устройство использует указанную ориентацию. См. Примечания для более подробной информации. |
resolution | Указывает разрешение (плотность пикселей) устройства вывода. |
scan | Описывает процесс сканирования телевизионных выходных устройств. |
width | Средство ширины носителя описывает ширину поверхности отображения выходного устройства (например, ширину окна документа или ширину окна страницы на принтере). |
| Устаревшие функции | подробности |
device-aspect-ratio | Deprecated CSS будет отображаться только на устройствах, соотношение высоты и ширины которых соответствует указанному соотношению. Это deprecated функция и не гарантируется работа. |
max-device-width | Deprecated То же, что и max-width но измеряет max-width физического экрана, а не ширину экрана браузера. |
min-device-width | Deprecated То же, что и min-width но измеряет min-width физического экрана, а не ширину экрана браузера. |
max-device-height | Deprecated То же, что и max-height но измеряет ширину физического экрана, а не ширину экрана браузера. |
min-device-height | Deprecated То же, что и min-height но измеряет ширину физического экрана, а не ширину экрана браузера. |
замечания
Медиа-запросы поддерживаются во всех современных браузерах, включая Chrome, Firefox, Opera и Internet Explorer 9 и выше.
Важно отметить, что функция orientation носителей не ограничивается мобильными устройствами. Он основан на ширине и высоте окна просмотра (а не на окнах или устройствах).
Ландшафтный режим - это когда ширина области просмотра больше высоты видового экрана.
Портретный режим - это когда высота видового экрана больше ширины видового экрана.
Обычно это означает, что настольный монитор находится в ландшафтном режиме, но иногда это портрет.
В большинстве случаев мобильные устройства сообщают о своем разрешении, а не о реальном размере пикселей, которые могут отличаться из-за плотности пикселей. Для того, чтобы заставить их сообщать их реальный размер пикселя добавить следующее внутри head тега:
<meta name="viewport" content="width=device-width, initial-scale=1">
Основной пример
@media screen and (min-width: 720px) {
body {
background-color: skyblue;
}
}
Вышеупомянутый медиа-запрос определяет два условия:
- Страница должна просматриваться на обычном экране (не на печатной странице, проекторе и т. Д.).
- Ширина порта просмотра пользователя должна быть не менее 720 пикселей.
Если эти условия выполнены, стили внутри медиа-запроса будут активны, а цвет фона на странице будет синим.
Запросы мультимедиа применяются динамически. Если на странице загружаются условия, указанные в запросе на медиа, CSS будет применяться, но будет немедленно отключен, если условия перестанут выполняться. И наоборот, если условия изначально не выполняются, CSS не будет применяться до тех пор, пока не будут выполнены указанные условия.
В нашем примере, если ширина порта представления пользователя первоначально больше 720 пикселей, но пользователь сжимает ширину браузера, цвет фона перестанет быть голубым, как только пользователь изменит размер порта представления на менее чем 720 пикселей в ширина.
Использовать по тегу ссылки
<link rel="stylesheet" media="min-width: 600px" href="example.css" />
Эта таблица стилей по-прежнему загружается, но применяется только на устройствах с шириной экрана более 600 пикселей.
MediaType
Запросы СМИ имеют необязательный параметр mediatype . Этот параметр устанавливается непосредственно после @media декларации ( @media mediatype ), например:
@media print {
html {
background-color: white;
}
}
Приведенный выше код CSS придаст HTML элементу DOM белый цвет фона при печати.
Параметр mediatype имеет необязательный или not only префикс, который будет применять стили ко всему, кроме указанного медиатипа или только указанного типа носителя, соответственно. Например, следующий пример кода применит стиль к каждому типу носителя, кроме print .
@media not print {
html {
background-color: green;
}
}
Точно так же, просто показывая это только на экране, это можно использовать:
@media only screen {
.fadeInEffects {
display: block;
}
}
Список mediatype может быть лучше понят со следующей таблицей:
| Тип носителя | Описание |
|---|---|
all | Применить ко всем устройствам |
screen | Компьютеры по умолчанию |
print | Принтеры в целом. Используется для создания печатных версий веб-сайтов |
handheld | КПК, мобильные телефоны и карманные устройства с небольшим экраном |
projection | Для проектной презентации, например, проекторы |
aural | Речевые системы |
braille | Брайлевские тактильные устройства |
embossed | Вышитые брайлевские принтеры |
tv | Телевизионные устройства |
tty | Устройства с сеткой символов с фиксированным шагом. Терминалы, портативные устройства. |
Использование медиа-запросов для разных размеров экрана
Часто, отзывчивый веб-дизайн включает медиа-запросы, которые являются блоками CSS, которые выполняются только в том случае, если условие выполнено. Это полезно для гибкого веб-дизайна, потому что вы можете использовать медиа-запросы, чтобы указать разные стили CSS для мобильной версии вашего сайта в сравнении с настольной версией.
@media only screen and (min-width: 300px) and (max-width: 767px) {
.site-title {
font-size: 80%;
}
/* Styles in this block are only applied if the screen size is atleast 300px wide, but no more than 767px */
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.site-title {
font-size: 90%;
}
/* Styles in this block are only applied if the screen size is atleast 768px wide, but no more than 1023px */
}
@media only screen and (min-width: 1024px) {
.site-title {
font-size: 120%;
}
/* Styles in this block are only applied if the screen size is over 1024px wide. */
}
Ширина против Viewport
Когда мы используем «ширину» с медиа-запросами, важно правильно установить метатег. Основной метатег выглядит так, и его нужно поместить внутри <head> .
<meta name="viewport" content="width=device-width,initial-scale=1">
Почему это важно?
На основе определения MDN «ширина»
Средство ширины носителя описывает ширину поверхности отображения выходного устройства (например, ширину окна документа или ширину окна страницы на принтере).
Что это значит?
View-port - это ширина самого устройства. Если ваше разрешение экрана говорит, что разрешение 1280 x 720, ширина вашего порта просмотра «1280px».
Чаще всего многие устройства выделяют различное количество пикселей для отображения одного пикселя. Например, iPhone 6 Plus имеет разрешение 1242 x 2208. Но фактическая ширина видового экрана и высота видового экрана - 414 x 736. Это означает, что для создания 1 пикселя используются 3 пикселя.
Но если вы не установили meta правильно, он попытается показать вашу веб-страницу с ее родным разрешением, что приведет к уменьшенному просмотру (меньшие тексты и изображения).
Медиа-запросы для экранов сетчатки и не Retina
Хотя это работает только для браузеров на базе WebKit, это полезно:
/* ----------- Non-Retina Screens ----------- */
@media screen
and (min-width: 1200px)
and (max-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- Retina Screens ----------- */
@media screen
and (min-width: 1200px)
and (max-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}
Исходная информация
На дисплее есть два типа пикселей. Один - это логические пиксели, а другой - физические пиксели. В основном, физические пиксели всегда остаются неизменными, потому что они одинаковы для всех устройств отображения. Логические пиксели изменяются в зависимости от разрешения устройств для отображения более качественных пикселей. Соотношение пикселей устройства - это соотношение между физическими пикселями и логическими пикселями. Например, MacBook Pro Retina, iPhone 4 и выше сообщают о соотношении пикселей устройства в 2, поскольку физическое линейное разрешение вдвое превышает логическое разрешение.
Причина, по которой это работает только с браузерами на основе WebKit, объясняется:
- Префикс поставщика
-webkit-перед правилом. - Это не было реализовано в других машинах, кроме WebKit и Blink.
Терминология и структура
Медиа-запросы позволяют применять правила CSS на основе типа устройства / носителя (например, экрана, печати или портативного компьютера), называемого типом носителя , дополнительные аспекты устройства описаны с такими мультимедийными функциями , как доступность цветов или размеров видовых экранов.
Общая структура медиа-запроса
@media [...] {
/* One or more CSS rules to apply when the query is satisfied */
}
Медиа-запрос, содержащий тип носителя
@media print {
/* One or more CSS rules to apply when the query is satisfied */
}
Медиа-запрос, содержащий тип носителя и функцию мультимедиа
@media screen and (max-width: 600px) {
/* One or more CSS rules to apply when the query is satisfied */
}
Медиа-запрос, содержащий функцию мультимедиа (и неявный тип носителя «все»)
@media (orientation: portrait) {
/* One or more CSS rules to apply when the query is satisfied */
}
Медиа-запросы и IE8
Медиа-запросы вообще не поддерживаются в IE8 и ниже.
Обходное решение на основе Javascript
Чтобы добавить поддержку IE8, вы можете использовать один из нескольких решений JS. Например, ответ может быть добавлен для добавления поддержки медиа-запросов для IE8 только с помощью следующего кода:
<!--[if lt IE 9]>
<script
src="respond.min.js">
</script>
<![endif]-->
CSS Mediaqueries - это другая библиотека, которая делает то же самое. Код для добавления этой библиотеки в ваш HTML-код будет идентичным:
<!--[if lt IE 9]>
<script
src="css3-mediaqueries.js">
</script>
<![endif]-->
Альтернативный вариант
Если вам не нравится решение на основе JS, вы также должны подумать о добавлении таблицы стилей IE <9, в которой вы настраиваете свой стиль для IE <9. Для этого вы должны добавить следующий код HTML в свой код:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->
Замечания :
Технически это еще одна альтернатива: использование CSS-хаков для IE <9. Он имеет то же влияние, что и таблица стилей IE <9, но для этого вам не нужна отдельная таблица стилей. Однако я не рекомендую этот параметр, поскольку они создают недопустимый код CSS (что является лишь одной из причин, по которым использование хаков CSS обычно не одобряется сегодня).