Пользовательское значение для Safe-Area-Inset CSS SCSS

Question

Как мне установить пользовательское значение для переменной окружения в случае, если дисплей имеет вырезы?

Предполагается, что браузер поддерживает ENV

Если я установил:

padding-left: env(safe-area-inset-left)

В данном случае:

если дисплей имеет вырезы (левая сторона) - браузер установит собственные параметры c значение ;

если нет (прямоугольник) - значение будет 0px

ВОПРОС: Как мне установить собственное значение (допустим, 30 пикселей) вместо значения браузера?

Для ясности, я хочу - отступ 30 пикселей слева, если дисплей имеет вырезы, а 20 пикселей - это прямоугольник.

Как это можно сделать?

Answer 1

Вы можете использовать новый CSS clamp(), чтобы сохранить значение от 20 до 30 пикселей.

.block {
  padding-left: 20px;
  padding-left: clamp(20px, 20px + env(safe-area-inset-left), 30px);
}

Используя этот метод, среднее значение 20px + env(safe-area-inset-left) преобразуется в 20px + 0px на прямоугольнике отображается angular и 20px + 50px (50px является примером). Ограничение от 20 до 30 пикселей гарантирует, что значение останется в этом диапазоне. Добавление запасного варианта гарантирует, что браузеры, которые не поставляют env() или clamp(), по-прежнему будут иметь значение заполнения 20px.

РЕДАКТИРОВАТЬ: Я считаю, что ситуация clamp(MIN, VAL, MAX) более понятна, но поскольку VAL это MIN + something, вы также можете упростить его до min(20px + env(safe-area-inset-left), 30px).