css - 在带有 max() 函数的 SCSS 中使用 env(safe-area-inset-top)

Question

我正在开发一个网站，我希望它能在有刘海屏的设备(尤其是我拥有的 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 但是它也不起作用。

Answer 1

如果我没看错你的问题，你指的是 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));
    }
}