将 calc() 与 env(safe-area-inset) 一起使用

Posted 2023-03-07

【中文标题】将 calc() 与 env(safe-area-inset) 一起使用

【英文标题】：Using calc() with env(safe-area-inset)

【发布时间】：2018-05-27 23:44:30

【问题描述】：

我想使用 env(safe-area-inset-bottom) 将 margin-bottom 添加到元素，但仅当设备是 iPhone X 时。但是，使用 env(safe-area-inset) 添加的边距-bottom) 不够我喜欢，我希望在底部边距上再增加 34px。

    margin-bottom: calc(env(safe-area-inset-bottom) + 34px);

上面的样式确实添加了适当的边距，但是，当设备不是 iPhone X 时，margin-bottom 不会回到 0px。这是因为 calc()。有什么建议？谢谢。

【问题讨论】：

这是因为非 iPhone X 设备仍然支持env(safe-area-inset-bottom)，它们很可能会将其报告为零。然后将零添加到 34px。这将使非 iPhone X 设备上的边距底部为 34 像素。

【参考方案1】：

现在回答有点晚了，但是对于偶然发现这个问题的人来说，我的问题是“安全区域插入底部”是 UA 属性并且区分大小写。

来自@Haim Lankry 提到的链接

https://developer.mozilla.org/en-US/docs/Web/CSS/env()

padding: env(safe-area-inset-bottom, 50px); /* zero for all rectangular user agents */
padding: env(Safe-area-inset-bottom, 50px); /* 50px because UA properties are case sensitive */
padding: env(x, 50px 20px); /* as if padding: '50px 20px' were set because x is not a valid environment variable */
padding: env(x, 50px, 20px); /* ignored because '50px, 20px' is not a valid padding value and x is not a valid environment variable */

做这样的事情应该可以（S是大写）

margin-bottom: env(Safe-area-inset-bottom, 80px);

【参考方案2】：

env css 函数有第二个后备参数。 https://developer.mozilla.org/en-US/docs/Web/CSS/env

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

所以你可以这样做：

margin-bottom: calc(env(safe-area-inset-bottom, -34px ) + 34px);

【参考方案3】：

您可以像这样将 calc 包装在 @supports 查询中：

.rule 
  margin-bottom: 34px;

  @supports (margin-bottom: env(safe-area-inset-bottom)) 
    margin-bottom: calc(env(safe-area-inset-bottom) + 34px);
  

如果你使用的是 sass，你可以像这样编写一个 helper mixin：

@mixin supports-safe-area-insets 
  @supports (padding-top: env(safe-area-inset-top)) 
    @content;
  

你可以这样使用：

.rule 
  margin-bottom: 34px;

  @include supports-safe-area-insets 
    margin-bottom: calc(env(safe-area-inset-bottom) + 34px);
  

【参考方案4】：

您可以尝试将 34px 乘以 env(safe-area-inset-bottom);所以当 inset 为 0 时，它将是 0 + 34px * 0 = 0px

margin-bottom: calc(env(safe-area-inset-bottom) + 34px * env(safe-area-inset-bottom));

【讨论】：

另外我不确定这是否对您来说是个问题，但如果您在其他浏览器中遇到 calc 作为无效输入的问题，您将需要使用如下回退：第 1 行：margin-bottom: 0px； Line2: margin-bottom: calc(env(safe-area-inset-bottom) + 34px * env(safe-area-inset-bottom));