Правило @media
Описание
Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, монитор и др. В табл. 1 перечислены основные из них.
Так же можно устанавливать свои условия, например ширину экрана: @media screen and (max-width: 300px).
Синтаксис
@media тип носителя or / and условия {
стилевые правила
}Дополнительно
Типы носителей и их описание
| Значение | Описание |
| all | Все типы. Это значение используется по умолчанию. |
| Принтеры и другие печатающие устройства. | |
| screen | Экран монитора. |
| speech | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. |
Устаревшие типы носителей
| Значение | Описание |
| braille | Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми. |
| embossed | Принтеры, использующие для печати систему Брайля. |
| handheld | Наладонные компьютеры и аналогичные им аппараты. |
| projection | Проекторы. |
| tty | Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея). |
| tv | Телевизоры. |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style type='text/css'>
@media screen {
/* Стиль для отображения в браузере */
.h1-test {
background: #faf0e6; /* Цвет фона под текстом */
border: 2px dashed #800000; /* Рамка вокруг заголовка */
color: #a0522d; /* Цвет текста */
padding: 7px; /* Поля вокруг текста */
}
.h2-test {
color: #556b2f; /* Цвет текста */
margin: 0; /* Убираем отступы */
}
.p-test {
margin-top: 0.5em; /* Отступ сверху */
}
}
@media print {
/* Стиль для печати */
.h1-test,
.h2-test,
.p-test {
color: #000; /* Черный цвет текста */
}
}
</style>
<h1 class='h1-test'>Метод ловли льва в пустыне</h1>
<h2 class='h2-test'>Метод последовательного перебора</h2>
<p class='p-test'>
Пусть лев имеет габаритные размеры LxWxH, где L — длина льва от кончика носа до кисточки хвоста, W — ширина льва, а H — его высота. После чего пустыню разбиваем на ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва. Учитывая, что лев может находиться не строго на заданном участке, а одновременно на двух из них, клетку для ловли следует делать повышенной площади, а именно 2Lx2W. Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина льва или, что хуже, только его хвост.
</p>
<p class='p-test'>
Далее последовательно накрываем каждый из размеченных прямоугольников пустыни клеткой и проверяем, пойман лев или нет. Как только лев окажется в клетке, процедура поимки считается завершенной.
</p>
</body>
</html>Читайте также
Свойство margin-top
Устанавливает величину отступа от верхней границы текущего элемента до внутренней границы его родительского элемента....
Свойство widows
Свойство widows задаёт минимальное число строк текста, которое располагается на следующей странице при печати документа. Это свойство работает в том с...
Свойство font-weight
Устанавливает насыщенность шрифта.
Значение указывается в виде чисел от 100 до 900 с шагом 100 или с помощью заданных ключевых слов....
Свойство grid
Свойство grid является сокращенной формой записи, которая устанавливает значения для всех явных свойств сетки (grid-template-rows, grid-template-colum...