Question

我想使用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时，边距底部不会回到0px。这是因为calc（）。有什么建议？感谢。

Answer 1

您可以将calc包裹在@supports查询中，如下所示：

{0,1}

如果您使用的是sass，则可以这样编写辅助混合器：

122-555-1521 //true

155--122 //false

155,- //false

.-12 //false

123.123. //false

.12 //false

1.2,1-3 //true

您可以这样使用：

.rule {
  margin-bottom: 34px;

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

Answer 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);

Answer 3

您可以尝试将34px乘以env（safe-area-inset-bottom）;因此，当插入为0时，它将为0 + 34px * 0 = 0px

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

使用calc（）和env（安全区域插入）

3 个答案: