css переменные cal c var min, вложенный расчет на основе ширины и высоты области просмотра

Question

Для веб-приложения я хочу рассчитать ширину и высоту некоторых элементов в чистом виде css на основе vw (ширина области просмотра) и vh (высота области просмотра), в зависимости от того, какой из них меньше.

My подход

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 до сих пор.

Но причина, по которой ничего не работало, была просто опечатка. Высота области просмотра не 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));

    /*...*/
}

Но 1+ для sanriot для vmin.

РЕДАКТИРОВАТЬ / ПРИЛОЖЕНИЕ / РЕШЕНИЕ:

Тем временем у меня все заработало. Два или более горизонтальных прокручиваемых списка чисел, где каждый список прокручивается отдельно, и он показывает числа и прокручивает их по группам в зависимости от размера области просмотра устройств ... здесь видно на 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 - сумма полей.

Answer 2

Может быть, вы можете достичь этого, используя vmin единицу.

vmin единицу ^ref

Равно меньшему из vw или vh.

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

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