Справочник HTML & CSS

env()

Читает значения, заданные устройством, например безопасные области вокруг выреза и скруглённых углов телефона.

Синтаксис

env(safe-area-inset-top, fallback)

Параметры

Параметр	Тип	Описание
safe-area-inset-*	length	Безопасное расстояние от края `top`, `right`, `bottom` или `left`.
fallback	length	Значение, если устройство его не сообщает.

Примеры

Отступ, который не залезает под системную полоску «домой»:

<style>
  .bar {
    position: sticky; bottom: 0;
    padding: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: navy; color: white;
  }
</style>
 
<p>On phones with a notch, the bar is not covered by the system home indicator.</p>
<div class="bar">Bottom bar</div>

Примечания

Безопасные области отличны от нуля, только если страница заходит под вырез: <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">. На обычных экранах env() возвращает 0 или запасное значение.

См. также

padding — Внутренний отступ между содержимым и рамкой элемента.
max() — Берёт наибольшее из значений — способ задать нижний предел.

В учебнике

Медиазапросы — Адаптивная вёрстка с медиазапросами — тег viewport, правило @media, min-width и max-width, подход mobile first и перестройка каркаса.

Спасибо, что читаете!