@media
Обновлено: 09.01.2023
@media
Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, монитор и др. В табл. 1 перечислены основные из них.
Табл. 1. Типы носителей и их описание
| Тип | Описание |
|---|---|
| all | Все типы. Это значение используется по умолчанию. |
| Принтеры и другие печатающие устройства. | |
| screen | Экран монитора. |
| speech | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. |
Следующие типы являются корректными, но устаревшими и не дают никакого результата (табл. 2).
Табл. 2. Устаревшие типы носителей
| Тип | Описание |
|---|---|
| braille | Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми. |
| embossed | Принтеры, использующие для печати систему Брайля. |
| handheld | Наладонные компьютеры и аналогичные им аппараты. |
| projection | Проекторы. |
| tty | Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея). |
| tv | Телевизоры. |
Синтаксис
@media <тип носителя> {
<стилевые правила>
}
Значения
После ключевого слова @media идёт один или несколько типов носителя, перечисленных в табл. 1; если их больше одного, то они разделяются между собой запятой. После чего следуют обязательные фигурные скобки, внутри которых пишутся стилевые правила.
Пример
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>@media</title>
<style type="text/css">
@media screen { /* Style to display in the browser */
body {
font-family: Arial, Verdana, sans-serif; /* Chopped font */
font-size: 0.9em /* Font size */
color: #000080; /* Text color */
}
h1 {
background: #faf0e6; /* Background color under text */
border: 2px dashed #800000; /* Border around title */
color: #a0522d; /* Text color */
padding: 7px /* Margin around text */
}
h2 {
color: #556b2f; /* Text color */
margin: 0; /* Remove padding */
}
p {
margin-top: 0.5em; /* Top padding */
}
}
@media print { /* Print style */
body {
font-family: Times, 'Times New Roman', serif; /* Serif font */
}
h1, h2, p
color: #000; /* Black text color */
}
}
</style>
</head>
<body>
<h1>The method of catching a lion in the desert</h1>
<h2>Sequential iteration method</h2>
<p>Let the lion have overall dimensions LxWxH, where L is the length of the lion from the tip of the nose
to the tassel of the tail, W is the width of the lion, and H is its height. Then we divide the desert into
a series of elementary rectangles, the size of which coincides with the width and length of the lion.
Considering that the lion may not be strictly on a given area, but at the same time on
two of them, the cage for catching should be made with an increased area, namely 2Lx2W.
Thanks to this, we will avoid the error when only half of the
a lion or, worse, only his tail.</p>
<p>Next, successively cover each of the marked rectangles of the desert
cage and check if the lion is caught or not. Once the lion is in the cage, the procedure
the capture is considered complete.</p>
</body>
</html>Просмотреть документ, у которого CSS установлен как тип print можно, если распечатать определенную страницу. Или пойти на хитрость и временно заменить слово print на screen, чтобы отобразить итог в браузере. Именно так был получен рис. 2.
Команда @media применяется в основном для формирования одного стилевого файла, который разбит на блоки по типу устройств. Иногда же имеет смысл создать несколько разных CSS-файлов — один для печати, другой для отображения в браузере — и подключать их к документу по мере необходимости. В подобном случае следует воспользоваться элементом <link> с атрибутом media, значением которого выступают те же типы, перечисленные в табл. 1.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>@media</title>
<link media="print" rel="stylesheet" href="print.css">
<link media="screen" rel="stylesheet" href="main.css">
</head>
<body>
<p>...</p>
</body>
</html>В данном примере используются две таблицы стилей, одна для отображения в браузере, а вторая — для печати документа. Хотя на страницу загружаются одновременно два разных стиля, применяются они только для определённых устройств.