Правило @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>Метод ловли льва в пустыне
Метод последовательного перебора
Пусть лев имеет габаритные размеры LxWxH, где L — длина льва от кончика носа до кисточки хвоста, W — ширина льва, а H — его высота. После чего пустыню разбиваем на ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва. Учитывая, что лев может находиться не строго на заданном участке, а одновременно на двух из них, клетку для ловли следует делать повышенной площади, а именно 2Lx2W. Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина льва или, что хуже, только его хвост.
Далее последовательно накрываем каждый из размеченных прямоугольников пустыни клеткой и проверяем, пойман лев или нет. Как только лев окажется в клетке, процедура поимки считается завершенной.
Читайте также
Свойство counter-reset
Устанавливает переменную, в которой будет храниться счётчик отображений определенного элемента, а...
Свойство accent-color
Свойство accent-color определяет цвет акцента для некоторых элементов формы. Акцентом в данном сл...
Свойство font-style
Определяет начертание шрифта — обычное, курсивное или наклонное.<br><br>Когда для тек...
Свойство border-left-color
Устанавливает цвет левой границы элемента.
Свойство list-style-type
Указывает, как будет размещаться маркер относительно текста — маркер обтекается текстом или вынес...