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

【问题标题】：css variables calc var min, nested calculation based on viewport width and heightcss变量calc var min，基于视口宽高的嵌套计算
【发布时间】：2020-06-19 14:06:04
【问题描述】：

对于一个网络应用程序，我想根据 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));

    /*...*/
}

我尝试了不同的组合...完全没有结果。谁能带我离开这里？

【问题讨论】：

你自己回答，你使用了一个前面没有任何值的单位，那是'null'；）

标签： css css-calc

【解决方案1】：

感谢sanriot的贡献。直到现在我才知道vmin。

但没有任何工作的原因只是一个错字。视口高度不是 vh 而是 100vh :-)

所以修正后的代码有效

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

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

    /*...*/
}

但是对于 vmin 来说 sanriot 是 1+。

编辑/附录/解决方案：

与此同时，我得到了它的工作。两个或多个水平可滚动数字列表，其中每个列表可单独滚动，它显示数字并根据设备视口大小按组滚动它们...此处在 iPad 和 iPhone 上可见

我为列表元素分配了一个通用 css 规则中的变量 --grid: 10vmin; 并稍后在媒体查询中使用此变量，例如

@media only screen and (min-width: 600px) {
    span.btn11 {
        width: calc(calc(2 * var(--grid)) - 8px);
        height: calc(calc(2 * var(--grid)) - 8px);
    }
    span.btn21 {
        width: calc(calc(2 * var(--grid)) - 8px);
        height: calc(calc(4 * var(--grid)) - 8px);
    }
}

其中span.btn11 是方形按钮，span.btn21 是双倍高度，8px 是边距之和。

【讨论】：

【解决方案2】：

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

vmin 单位^ref

等于 vw 或 vh 中的较小者。

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

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：