SASS - min関数でvhとpxを比較します

Question

ビューポートの高さの7.6％と55pxの間で最小値を取得しようとしています。

min-height: min(7.6vh, 55px); 

これは、互換性のないユニットに関するエラーを表示します。これはできますか？

Answer 1

SASSコンパイラは、ターゲットデバイスのビューポートの高さを知ることができないため、vhを指定された固定値のピクセルと比較することはできません。

あなたが行うことができるのは、2つの数字のいずれかに高さを設定し、他の数字に最小の高さを設定することです。ただし、セマンティクスはわずかに異なります。これも最大高さを持つためです。次の例では、DIVは、（最大で）ビューポートの高さの100％を取るが、少なくとも450pxます

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div { 
 
    background: darkgreen; 
 
    height: 450px; 
 
    min-height: 100vh; 
 
}

<div> 
 
</div>