Динамичный расчет в calc()

Рейтинг: 1Ответов: 1Опубликовано: 19.01.2023

Описание

Для адаптивности который автоматически подстроит страницу под любые размеры устройства создаю переменную --size-standart в css:

:root {
    --size-standart: calc(410px / 1vmin);
}

... где 410px по моим расчетам просто подходящий размер.
Теперь если задать размеры элементов с помощью --size-standart:

<button style="padding: calc(var(--size-standart) / 4)">
  <img style="height: var(--size-standart); aspect-ratio: 1;">
</button>

... то они должны подгоняться под размер экрана независимо от типа устройства.

Проблема в том, что calc() не считает 410px / 1vmin, потому что "делитель должен быть <number>".

Вопрос

По идеи 1vmin это число в пикселях (к примеру у меня 7.456px), а делить пиксели не должно быть проблем. Так все таки как можно в css считать 410px / 1vmin хоть с calc(), хоть без него?

css
Источник: Stack Overflow на русском

Ответы

▲ 0

Я не уверен, что это можно реализовать средствами css, но всегда можно просчитать это через js:

const btn = document.querySelector('button');
const img = document.querySelector('img');

const baseSize = 410;

const resizeElems = function() {

  let width = window.innerWidth / 100;                      // 1vw
  let height = window.innerHeight / 100;                    // 1vh

  let min = Math.min(width, height);                        // 1vmin

  let res = baseSize / min;                                 // ваш --size-standart
  btn.style.padding = (res / 4) + "px";                     // паддинг кнопки
  img.style.height = res + "px";                            // высота картинки
}

document.addEventListener('DOMContentLoaded', resizeElems); // просчет при загрузке страницы
window.onresize = resizeElems;                              // просчет при изменении размера окна
<button>
  <img src="https://site.ru/image.png">
</button>