Правило @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>Читайте также
Свойство width
Устанавливает ширину содержимого элемента. По умолчанию ширина зависит от типа элемента: блочные занимают всю доступную ширину; ширина строчно-блочных...
Стиль первого элемента
Псевдокласс задаёт стиль первого элемента в группе братских элементов (имеющих одного родителя).
Для выбора первого элемента определённого типа...
Стиль выделенного пользователем текста
Псевдоэлемент ::selection применяет стиль к выделенному пользователем тексту. В правилах стилей допускается использовать следующие свойства: color, ba...
Свойство animation-delay
Устанавливает задержку старта анимации....