@media — типы носителей в CSS
«@media» – девятый урок учебника CSS. В этом уроке речь пойдет об использовании различных методов CSS форматирования в зависимости от типов носителей в CSS.
Нередко бывают случаи, что сайт необходимо отобразить различным образом, в зависимости от используемого устройства, например сайт должен выглядеть по-разному на домашнем компьютере и на мобильном телефоне. Для этих целей используется @media в CSS.
Типы носителей в CSS.
Для определения методов отображения документа на различных устройствах вывода используются типы носителей.
@media
Позволяет использовать различные стили, для вывода на разных устройствах.
В примере ниже будут использоваться различные стили при выводе документа на экран и при печати документа:
@media screen
{
div.test
{
font – family: times,serif; font – size:8px
}
}
@media print
{
div.test
{
font – family: verdana,sans – serif; font – size:30px
}
}
Основные типы носителей вы можете видеть в списке ниже :
- all – относится ко всем устройствам вывода
- aural – генераторы речи
- braille – устройства азбуки Брайля
- embossed – устройства печати азбуки Брайля
- handheld – карманные компьютеры и другие портативные устройства
- print – принтеры
- projection – проекторы
- screen – экраны компьютеров
- tty – телетайп
- tv – телевизоры
Работа с типами носителей (@media) в CSS позволяет сделать ваш сайт действительно кроссбраузерным и мультиплатформенным, позволяет упростить отображение сайта на мобильных устройствах и многое другое…
В следующем уроке мы разберемся с методами форматирования границ в CSS.