CSS-медиафункция `height`

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;
  }
}

Результат

Спецификации

Совместимость с браузерами

См. также

• Использование медиазапросов
• @media