Высота
Базовая Широко доступная
Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.
Свойство height CSS свойство среды может использоваться для применения стилей на основе высоты поля просмотра (или области страницы для страничной среды).
Синтаксис
Функция height задаётся как значение <length>, представляющее высоту поля просмотра. Это свойство диапазона, что означает, что вы также можете использовать префиксные варианты min-height и max-height для запроса минимальных и максимальных значений соответственно.
Примеры
HTML
<div>Watch this element as you resize your viewport's height.</div>
CSS
/* Exact height */
@media (height: 360px) {
div {
color: red;
}
}
/* Minimum height */
@media (min-height: 25rem) {
div {
background: yellow;
}
}
/* Maximum height */
@media (max-height: 40rem) {
div {
border: 2px solid blue;
}
}
Результат
Спецификации
| Спецификация |
|---|
| Спецификация медиазапросов уровня 4 # высота |
Совместимость браузеров
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
height |
1 | 12 | 2 | 10 | 3 | 18 | 4 | 10.1 | 1 | 1.0 | ≤37 |
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/height
