问安全区域的自定义值.嵌入CSS

EN

您可以使用新的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，20px + 50px (以50px为例)。夹持从20到30像素将确保值保持在该范围内。添加回退将确保不发布env()或clamp()的浏览器仍然具有20px填充值。

编辑:我发现clamp(MIN, VAL, MAX)的情况更容易理解，但是由于VAL是MIN + something，所以您也可以将其简化为min(20px + env(safe-area-inset-left), 30px)。