Правило @viewport
Описание
Позволяет оптимизировать макет веб-страницы в зависимости от различных устройств и их размеров. Является аналогом meta name='viewport', но переносит параметры из HTML в правила CSS.
Правило устарело!
Синтаксис
@viewport {
дескриптор: значение;
}Подробности
| Дескриптор | Допустимые значения | Описание |
| min-width | Любые единицы CSS для размера. | Минимальная ширина области просмотра. |
| max-width | Любые единицы CSS для размера. | Максимальная ширина области просмотра. |
| width | Любые единицы CSS для размера, а также device-width. | Одновременно устанавливает min-width и max-width. |
| min-height | Любые единицы CSS для размера. | Минимальная высота области просмотра. |
| max-height | Любые единицы CSS для размера. | Максимальная высота области просмотра. |
| height | Любые единицы CSS для размера, а также device-height. | Одновременно устанавливает min-height и max-height. |
| zoom | - auto — браузер автоматически устанавливает масштаб, чтобы целиком отобразить документ; - число — положительное число определяет масштаб, значение 1.0 соответствует 100%; - проценты — масштаб можно задавать в процентах, 100% указывает, что масштабирование не требуется. | Устанавливает начальный масштаб документа, может задаваться как положительное дробное число или в процентах. По умолчанию установлено значение auto. |
| min-zoom | Аналогично. | Устанавливает минимальный масштаб документа. По умолчанию установлено значение auto. |
| max-zoom | Аналогично. | Устанавливает максимальный масштаб документа. По умолчанию установлено значение auto. |
| user-zoom | - zoom — пользователь может масштабировать документ; - fixed — пользователю запрещено изменять масштаб. | Определяет, может пользователь масштабировать документ или нет. По умолчанию установлено значение zoom. |
| orientation | - auto — устанавливает ориентацию автоматически на основе положения устройства; - portrait — документ должен быть зафиксирован в портретной ориентации; - landscape — документ должен быть зафиксирован в альбомной ориентации. | Управляет ориентацией документа. По умолчанию установлено значение auto. |
Пример
<!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>
@viewport {
width: device-width;
zoom: 1;
max-zoom: 2;
}
</style>
</body>
</html>Читайте также
Свойство padding-block
Устанавливает расстояние от внутреннего края рамки элемента до воображаемого прямоугольника по блочной оси....
Свойство grid-column-end
Определяет местоположение в сетке ссылаясь на конкретные линии.
grid-column-end / grid-row-end — это линия на которой элемент заканчивается....
Свойство unicode-bidi
В европейских языках чтение текста происходит слева направо, в то время как есть языки, где текст читается справа налево. При смешении в одном докумен...
Свойство min-width
Устанавливает минимальную ширину элемента.
Значение ширины элемента будет вычисляться в зависимости от значений установленных свойств width, ma...