Правило @media

Описание

Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, монитор и др. В табл. 1 перечислены основные из них.
Так же можно устанавливать свои условия, например ширину экрана: @media screen and (max-width: 300px).

Синтаксис

@media тип носителя or / and условия {
стилевые правила
}

Типы носителей и их описание

Значение Описание
all Все типы. Это значение используется по умолчанию.
print Принтеры и другие печатающие устройства.
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. Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина льва или, что хуже, только его хвост.

Далее последовательно накрываем каждый из размеченных прямоугольников пустыни клеткой и проверяем, пойман лев или нет. Как только лев окажется в клетке, процедура поимки считается завершенной.

Читайте также

Свойство bottom

Устанавливает положение нижнего края содержимого элемента без учёта толщины рамок и отступов.<...

Свойство position

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на ...

Свойство border-right-color

Устанавливает цвет правой границы элемента.

Функция attr()

Функция применяется для добавления значения атрибута HTML-элемента в стилевое свойство. Например,...

Свойство column-span

Определяет, как должен отображаться элемент в многоколоночном тексте — занимать ширину всех колон...