У меня есть веб-приложение, созданное с помощью React. Базовый шаблон имеет ширину 1080px. Итак, я использую VW. Я считаю это так в Scss Mixin:
@function pxtovw($px) {
$vw-context: (1080 * 0.01);
@return ($px / $vw-context) * 1vw //($px / $vw-context);
}
Моя проблема в том, что я не понимаю, как бороться с соотношением сторон. Мне нужно установить все единицы на базовую ширину 980 пикселей, если соотношение сторон больше 1080/1920.
Я не могу проверить соотношение сторон в js или scss, потому что они компилируются только при сборке. Я не могу использовать scss @import внутри @media (min-aspect-ratio: 1081/1920). Единственное, что мне пришло в голову, это переписать ВСЕ pxtovw внутри @media (min-aspect-ratio: 1081/1920), но это выглядит как накладные расходы ...
Пример - http://take.ms/uvn9B
Так, что я могу сделать с этим?