HTML-верстка: инструменты и приемы профессиональной front-end разработки

Медиа типы CSS


назад вперед

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


Медиа типы

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


Правило @media

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

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

<html>
<head>
<style>
@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;}
  }
</style>
</head>

<body>
....
</body>
</html>


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

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

Название Описание
all Все типы устройств и программ
aural Голосовые браузеры
braille Устройства со шрифтом Брайля
embossed Принтеры со шрифтом Брайля
handheld Мобильные устройства и КПК
print Принтеры
projection Проекторы и слайдеры
screen Мониторы
tty Телетайпы
tv Устройства телевизионного типа


Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта