пример
Два разных таблиц стилей для двух различных типов носителей (экран и печать):
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
Попробуй сам " Определение и использование
media атрибут определяет , какой медиа / устройства целевого ресурса оптимизирован для.
Этот атрибут в основном используется с CSS стилей для определения различных стилей для разных типов носителей.
media атрибут может принимать несколько значений.
Поддержка браузеров
| Атрибут | |||||
|---|---|---|---|---|---|
| media | да | да | да | да | да |
Отличия между HTML 4.01 и HTML5
media атрибут теперь поддерживает больше значений.
Синтаксис
<link media="value">
Возможные Operators
| Стоимость | Описание |
|---|---|
| and | Указывает оператор И |
| not | Указывает оператор NOT |
| , | Указывает оператор OR |
приборы
| Стоимость | Описание |
|---|---|
| all | По умолчанию. Подходит для всех устройств |
| aural | синтезаторов речи |
| braille | Брайля устройства обратной связи |
| handheld | Портативные устройства (маленький экран, ограниченная пропускная способность) |
| projection | Проекторы |
| Печать Режим предварительного просмотра / печатные страницы | |
| 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 | Задает бит на пиксель в буфере кадра монохромный. "min-" и "max-" префиксы могут быть использованы. Пример: media="screen and (monochrome:2)" |
| resolution | Определяет плотность пикселей (точек на дюйм или ДИКМ) целевого отображения / бумаги. "min-" и "max-" префиксы могут быть использованы. Пример: media="print and (resolution:300dpi)" |
| scan | Определяет метод сканирования на экране телевизора. Возможные значения "progressive" и "interlace" . Пример: media="tv and (scan:interlace)" с media="tv and (scan:interlace)" |
| grid | Указывает, если устройство вывода сетки или растрового изображения. Возможные значения "1" для сетки, и "0" в противном случае. Пример: media="handheld and (grid:1)" |