我正在开发一个网站,我希望它能在有刘海屏的设备(尤其是我拥有的 iPhone X)上正确显示。 在 this page给出了以下代码示例:
@supports(padding: max(0px)) {
.post {
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
}
}
但是当我有这个设置时,在 Chrome 中我可以看到它是无效的(见下面链接的照片)
有没有办法纠正这个问题,或者可以使用 SCSS @if
语句来检测父元素是否有 padding > 0,如果没有则添加 1rem
padding对吗?
我的问题不是提到的那个here ,这就是我使用代码的方式,我也尝试将其放入标准的 CSS 文件中而没有 unquote
但是它也不起作用。
最佳答案
如果我没看错你的问题,你指的是 css max function不是 Sass 提供的 max 函数——这个例子也是 CSS,因此需要提到的 Sass 'hack' 才能在 SCSS 中工作。
您需要处理的第一件事是使用 constant
的 iOS 11.0 - 11.2 实现。最简单的方法是将 safe-area-inset 分配给 CSS 变量。
在下面的示例中,我为所有变量创建了默认值 0px——但您也可以在使用变量时使用回退值 var(--some-var, 12px)
(使用12px 如果 --some-var 未定义)。
第二部分是使用 --safe-area-inset 变量的代码。
我希望它有意义:-)
:root {
/* -------------------------------------------------------------------
Assign the default/constant/env values to CSS variables
*/
--safe-area-inset-top : 0px;
--safe-area-inset-right : 0px;
--safe-area-inset-bottom: 0px;
--safe-area-inset-left : 0px;
/* it is probably safe to skip the `constant` test in 2023 :) */
@supports (top: constant(safe-area-inset-top)){
--safe-area-inset-top : constant(safe-area-inset-top);
--safe-area-inset-right : constant(safe-area-inset-right);
--safe-area-inset-bottom: constant(safe-area-inset-bottom);
--safe-area-inset-left : constant(safe-area-inset-left);
}
@supports (top: env(safe-area-inset-top)){
--safe-area-inset-top : env(safe-area-inset-top);
--safe-area-inset-right : env(safe-area-inset-right);
--safe-area-inset-bottom: env(safe-area-inset-bottom);
--safe-area-inset-left : env(safe-area-inset-left);
}
}
@supports(padding: Max(0px)) {
.post {
/* -------------------------------------------------------------------
Use the CSS variables in the max function
*/
padding-left: Max(12px, var(--safe-area-inset-left));
padding-right: Max(12px, var(--safe-area-inset-right));
}
}
关于css - 在带有 max() 函数的 SCSS 中使用 env(safe-area-inset-top),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54012411/