7.5. Правило @media. Правило @media позволяет задавать правила CSS для различных устройств в пределах одной таблицы стилей, разделенных запятыми. Иными словами, вы можете задать для одного и того же элемента один размер шрифта для печати, а другой для просмотра на экране. Например: @media print { Body { font-size: 10pt }. } @media screen { Body { font-size: 12pt }. } В примере при просмотре документа на экране размер шрифта будет 10 пунктов, а при печати 12 пунктов. Рассмотрим еще один пример: @media screen, print { Body { font-size: 14pt }. } В этом примере и при печати, и при просмотре размер шрифта будет одинаковый – 14 пунктов. Рассмотрим список всех устройств, поддерживаемых CSS. Значение указывает, что документ предназначен: • all – для всех устройств; • aural – речевых синтезаторов; • braille – устройств чтения азбуки Брайля; • embossed – печати азбуки Брайля; • handheld – переносимых портативных устройств (небольшие монохромные экраны с ограниченной полосой частот); • print – страничных непрозрачных материалов и для документов, просматриваемых на экране в режиме предварительного просмотра печати; • projection – настенных презентаций, например для проекторов или для печати плакатов; • screen – цветных дисплеев; • tty – устройств, использующих набор символов с фиксированной шириной, например телетайпов, терминалов или портативных устройств с ограниченными возможностями отображения; для устройств типа tty не следует использовать пикселы; • tv – устройств типа телевизора, для которых характерны низкое разрешение, цветное изображение, ограниченная прокрутка на экране и возможность передачи звука. Следует отметить, что названия типов устройств не зависят от регистра. Как правило, для схожих устройств задаются схожие правила CSS, поэтому все устройства в CSS разбиты по типам. В табл. 7.1 представлены взаимоотношения между группами и типами устройств. Таблица 7.1. Группы устройств. Значение both в таблице означает, что используются устройства всей группы. Приведу перевод названий типов устройств: • без разбивки – continuous; • с разбивкой – paged; • визуальные – visual; • звуковые – aural; • тактильные – tactile; • сеточные – grid; • растровые – bitmap; • интерактивные – interactive; • статичные – static. Попробуйте в качестве эксперимента создать простую страницу с различными свойствами и значениями для устройств screen и print и посмотреть ее на экране и в окне предварительного просмотра.