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

Question

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

    /*...*/
}

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

标签： csscss-calc

Answer 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是边距之和。