Веб-школа



Медиа типы позволяют вам указать то, как будет отображаться ваш документ на различных устройствах. Можно задать разный стиль для отображения документа на мониторе, при печати, в голосовых браузерах и т.д.

Медиа типы

Некоторые свойства CSS созданы под определенные устройства отображения веб-страниц. Например, свойство «voice-family» создано для использования в голосовых браузерах. Некоторые свойства можно использовать для разлычных устройств. Например, свойство «font-size» можно использовать как для монитора, так и для вывода документа на печать. Документ обычно имеет больший шрифт на мониторе, чем на бумаге, кроме того шрифты sans-serif лучше читаются с экрана, а для печати лучше подходят шрифты serif.

Правило @media

Правило @media позволяет нам назначать различные стили для разных устройств в пределах одной таблицы стилей.

Следующий css-код указывает браузеру, что он должен отображать текст на мониторе размером 14 пикселей шрифтом Verdana. При печати шрифт будет размером 10 пикселей, шрифт поменяется на Times. Не забывайте о том, что жирность шрифта остается одинаковой и на мониторе, и при печати:

@media screen   {   p.test {font-family:verdana,sans-serif;font-size:14px;}   } @media print   {   p.test {font-family:times,serif;font-size:10px;}   } @media screen,print   {   p.test {font-weight:bold;}   } ….

Различные медиа типы

Заметка: названия медиа типов не чувствительны к регистру.