Here we declare the width to be 50vmax (50 units out of 100 from the BIGGEST viewport dimension)
这样看起来像这样:

我们可以看到父框现在恰好是浏览器宽度长度的一半,这是因为浏览器的宽度大于高度。 现在,如果我们改变一切,将会得到不同的结果。

Here we declare the width to be 50vmin (50 units out of 100 from the SMALLEST viewport dimension)
所以看起来像这样:

我们可以看到父框现在恰好是浏览器高度的一半,这是因为浏览器的高度小于宽度。
基于字体属性的单位ex 和 ch我从未使用过这些单元,但让我们看看它们是如何工作的。 所以首先让我们从ex开始。 这个单位测量您正在使用的任何字体系列的字母" X"的高度,这是指字母" X"的高度? 因此,如果此" X"的高度为10px(字面的字母为" X"),则1ex将为10px,假设您使用的是另一个字体系列中的" X",其中" X"的高度为9px,所以现在1ex 是9px。
ch的行为方式非常相似,不同之处在于1ch的长度将基于字体家族的字母" O"的宽度,因此,如果字母" O"的宽度为5px,则1ch将等于5px 。
em此单位响应父元素的字体大小,因此,如果父元素的字体大小为10px,则每个em现在等于10 px。
