SASS - 将 vh 和 px 与 min 函数进行比较

Question

我试图获得视口(viewport)高度的 7.6% 和 55px 之间的最小值。

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

这给了我一个关于不兼容单位的错误。这可以做到吗？

Answer 1

SASS 编译器无法知道目标设备的视口(viewport)高度，因此无法将 vh 与给定像素的固定值进行比较。

您可以做的是将高度设置为两个数字中的一个，并将最小高度设置为另一个数字。但是，语义略有不同，因为您现在也有一个最大高度。在以下示例中，div 将(最多)占用视口(viewport)高度的 100%，但至少为 450px:

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

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

<div>
</div>