css变量calc var min，基于视口宽度和高度的嵌套计算

Question

对于Web应用程序，我想基于vw（视口宽度）和vh（视口高度），取决于哪一个较小，计算一些元素的宽度和高度宽度（纯CSS）。

我的方法是

div#top_panel > ul > li {
    /*...*/

    --w: calc(vw / 8);
    --h: calc(vh / 8);
    width: min(var(--w), var(--h));
    height: min(var(--w), var(--h));

    /*...*/
}

我尝试了不同的组合...完全没有结果。有人可以带我离开这里吗？

Answer 1

也许您可以通过使用vmin单元来实现。

vmin单位 ^ref

等于vw或vh中较小的一个。

.box {
  --size: 100vmin;
  width: calc(var(--size) / 8);
  height: calc(var(--size) / 8);
  background: #faf;
}

<div class="box"></div>