Моя установка:
// Set CSS Vars
:root {
// These variables control everything
/* set base values */
--text-base-size: 1.125em;
/* This is for smaller text (sm and down) */
--text-scale-ratio-down: 1.15;
/* This is for larger text (md and up) */
--text-scale-ratio-up: 1.18;
// Calculate sizes
--text-xxs: calc(((1em / var(--text-scale-ratio-down)) / var(--text-scale-ratio-down)) / var(--text-scale-ratio-down));
--text-xs: calc(var(--text-xxs) * var(--text-scale-ratio-down));
--text-sm: calc(var(--text-xs) * var(--text-scale-ratio-down));
--text-md: calc(1em * var(--text-scale-ratio-up));
--text-lg: calc(var(--text-md) * var(--text-scale-ratio-up));
--text-xl: calc(var(--text-lg) * var(--text-scale-ratio-up));
--text-xxl: calc(var(--text-xl) * var(--text-scale-ratio-up));
--text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio-up));
--text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio-up));
}
// Responsive
// Override variables for recalculation on desktops
@include mq(xxl){
:root {
/* set base values */
--text-base-size: 1.313em;
/* This is for smaller text (sm and down) */
--text-scale-ratio-down: 1.18;
/* This is for larger text (md and up) */
--text-scale-ratio-up: 1.22;
}
}
body {
// Set base font size
font-size: var(--text-base-size);
}
// Set font-size
h1 {
font-size: var(--text-xxxl);
}
После компиляции с postcss-preset-env
это выглядит так, как в IE 11:
h1 {
font-size: 1.93878em;
font-size:var(--text-xxxl);");
}
IE 11 не поддерживает настраиваемые свойства и использует значение 1.93878em. Это значение было статически вычислено postcss-preset-env
.
Это правильно на мобильных устройствах! На больших рабочих столах переменные CSS регулируются медиа-запросом, и текст отображается в большем размере.
Здесь это не работает, потому что IE 11 не распознает обновление переменной CSS в медиа-запросе. Может, это не сработает, потому что переменные CSS вложены?
Как может выглядеть решение для IE 11?