Как я могу поместить переменную CSS для ширины экрана пользователя в функцию cal c?

Question

Мой веб-сайт рассчитан на монитор большего размера и имеет ширину экрана 2560 пикселей (Samsung 32 "). Поэтому его необходимо уменьшить, чтобы он правильно отображался на любом меньшем экране, например обычный ноутбук с 17-дюймовым экраном имеет ширина пикселя 1366 пикселей. Таким образом, путем деления 1366/2560 мы получаем правильный процент масштаба в размере .53 для использования в формуле CSS transform:scale(calc(1366 / 2560));.

Вся страница обернута в элемент div, который я назвал .omniScale

.omniScale {
    display: table; 
    margin:0 auto;
    transform-origin: top left;
    transform:scale(calc(1366 / 2560));
}

Это прекрасно работает, однако 1366 должен динамически изменяться при загрузке страницы на ширину устройства пользователя, независимо от того, может ли это быть планшет, ноутбук, настольный монитор среднего размера или больше, вплоть до большой телевизор.

Использование 100vw вместо аппаратного номера не работает. Я не хочу использовать JavaScript, если этого можно избежать, поэтому должен работать для тех, у кого js выключен.

Answer 1

Добро пожаловать в переполнение стека:]

К сожалению, в данный момент нет механизма для вычисления целочисленного отношения из двух длины значений в чистом виде CSS (calc(100vw / 2560px) не будет работать, потому что вы можете разделить длину только с целым числом, чтобы получить другую длину, а не с другой длиной, чтобы получить целое число).

Поэтому, если вы хотите получить отношение вашего ссылочного элемента к фактическому окну просмотра, JavaScript кажется единственным вариантом. Разумный подход будет использовать JS просто для установки CSS пользовательского свойства и позволить стилям делать все остальное:

function setScaleRatio() {
  viewportWidth = document.documentElement.clientWidth;
  fullWidth = 2560 + 200;
  // (2560 is reference size, +200 just to make sure we'll see right border in this example)
  scaleRatio = viewportWidth / fullWidth;
  document.documentElement.style.setProperty('--ratio', scaleRatio);
};
setScaleRatio();
window.addEventListener('resize', setScaleRatio);

[style]::before {
  content: attr(style);
}

<div style="
width: 2560px;
transform: scale(var(--ratio));
transform-origin: top left;
font-size: 100px;
background-color: black;
color: white;
"></div>

Answer 2

Я не думаю, что это правильный подход. чтобы сделать что-то реагирующее на все экраны, лучше использовать проценты и @madia.

для получения дополнительной информации: https://blog.froont.com/9-basic-principles-of-responsive-web-design/

пример:

.container {
    width: 2560px;
}

@media only screen and (max-width: 2560px) {
    .container {
        width: 1366px;
    }
}

@media only screen and (max-width: 1366px) {
    .container {
        width: 900px;
    }
}

@media only screen and (max-width: 900px) {
    .container {
        width: 500px;
    }
}