Правило @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>Читайте также
Свойство writing-mode
Устанавливает направление текста на странице — по горизонтали или вертикали....
Свойство page-break-inside
Разрешает или запрещает разрыв страницы внутри элемента при печати....
Свойство animation-play-state
Указывает состояние анимации. Анимацию можно поставить на паузу и после этого воспроизвести с того места, где она была остановлена....
Свойство transform-style
Определяет, как дочерние элементы будут отображаться в 3D-пространстве. Это свойство должно использоваться совместно с transform....