我想使用 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()。有什么建议？谢谢。
【问题讨论】：
env(safe-area-inset-bottom)，它们很可能会将其报告为零。然后将零添加到 34px。这将使非 iPhone X 设备上的边距底部为 34 像素。
标签： ios css iphone calc iphone-x
现在回答有点晚了，但是对于偶然发现这个问题的人来说，我的问题是“安全区域插入底部”是 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);
【讨论】：
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);
【讨论】：
您可以像这样将 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);
}
}
【讨论】：
您可以尝试将 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));
【讨论】：