SASS - 用 min 函数比较 vh 和 px [英] SASS - compare vh and px with min function

问题描述

我试图在视口高度的 7.6% 和 55 像素之间获得最小值.

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

这给了我一个关于不兼容单位的错误.可以这样做吗?

解决方案

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

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

html, body {高度:100%；边距:0；填充:0；}div {背景:深绿色；高度:450px；最小高度:100vh；}

I am trying to get the minimum between 7.6% of the viewport height and 55px.

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

This gives me an error about incompatible units. Can this be done?

解决方案

The SASS compiler can't know the viewport height of the target device(s), so it is impossible to compare vh to a fixed value given pixels.

What you can do is to set the height to either of the two numbers and set a min-height to the other number. However, the semantics are slightly different, as you now also have a max-height. In the following example, the div will take (at most) 100% of the viewport height, but at least 450px:

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

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

<div>
</div>

这篇关于SASS - 用 min 函数比较 vh 和 px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！