Руководство по HTML

Полный список тегов HTML

Атрибут media свойства style HTML

Атрибут media свойств CSS определяет, для哪种 средства/устройства оптимизированы стили, и используется для указания стилей, предназначенных для специальных устройств (например, iPhone), голосовых или печатных средств.

　HTML <style> тег

Онлайн пример

Определите стили, используемые для печати:

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Использование атрибута media свойства source HTML - основное руководство (oldtoolbag.com)</title>
<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>
<h1>oldtoolbag.com Пример</h1>
<p>Если вы распечатаете эту страницу или откроете ее в режиме предварительного просмотра печати, вы увидите, что она использует стили таблицы стилей media = "print". "Печать" стили таблицы стилей содержат черный текст на белом фоне.</p>
</body>
</html>

Проверьте, <‹/›>

Совместимость браузеров

IEFirefoxOperaChromeSafari

Все主流 браузеры поддерживают атрибут media.

Определение и использование

Атрибут media определяет, для哪种 типа媒体的/устройства оптимизирован CSS-стиль
Этот атрибут используется для указания стиля, предназначенного для специальных устройств (например, iPhone), голосовой или печатной媒体的
Совет: Этот атрибут может принимать несколько значений

Различия между HTML 4.01 и HTML5

Нет

Грамматика

<style media="value>

Возможные операторы

Значение	Описание
and	Указать оператор AND
not	Указать оператор NOT
,	Указать оператор OR

Устройство

Значение	Описание
all	По умолчанию. Адаптируется ко всем устройствам
aural	Аудиосинтезатор
braille	Устройства обратной связи с помощью шрифта Брайля для слепых
handheld	Мобильное устройство (маленький экран, ограниченная полоса пропускания)
projection	Проектор
print	Режим предварительного просмотра печати / страница печати
screen	Компьютерный экран (по умолчанию)
tty	Телетайп и аналогичные媒介, использующие сетку символов с одинаковыми шириной и высотой
tv	Устройства типа телевидения (низкое разрешение, ограниченная способность прокрутки экрана)

Значение

Значение	Описание
width	Указать ширину целевой области экрана Могут использоваться префиксы "min-" и "max-". Пример: media="screen and (min-width:500px)"
height	Указать высоту целевой области экрана Могут использоваться префиксы "min-" и "max-". Пример: media="screen and (max-height:700px)"
device-width	Указать ширину целевого экрана/бумаги Могут использоваться префиксы "min-" и "max-". Пример: media="screen and (device-width:500px)"
device-height	Указать высоту целевого экрана/бумаги Могут использоваться префиксы "min-" и "max-". Пример: media="screen and (device-height:500px)"
orientation	Указать направление целевого экрана/бумаги Возможные значения: "portrait" или "landscape" Пример: media="all and (orientation: landscape)"
aspect-ratio	Указать коэффициент соотношения ширины/высоты целевой области экрана Могут использоваться префиксы "min-" и "max-". Пример: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio	Указать коэффициент соотношения ширины/высоты целевого экрана/бумаги Могут использоваться префиксы "min-" и "max-". Пример: media="screen and (aspect-ratio:16/9)"
color	Указать бит/цвет целевого экрана Могут использоваться префиксы "min-" и "max-". Пример: media="screen and (color:3)"
color-index	Указать количество цветов, которые может обрабатывать целевой экран. Могут использоваться префиксы "min-" и "max-". Пример: media="screen and (min-color-index:256)"
monochrome	Указать bits/pixel в монохромном буфере кадров. Могут использоваться префиксы "min-" и "max-". Пример: media="screen and (monochrome:2)"
resolution	Указать плотность пикселей целевого экрана/бумаги (dpi или dpcm). Могут использоваться префиксы "min-" и "max-". Пример: media="print and (resolution:300dpi)"
scan	Указать способ сканирования телевизионного экрана. Возможные значения: "progressive" и "interlace". Пример: media="tv and (scan:interlace)"
grid	Указать, является ли выходное устройство сеткой или битмапом. Возможные значения: "1" для сетки, в противном случае "0". Пример: media="handheld and (grid:1)"

　HTML <style> тег

HTML: <template> тег