Функция (миксин) для изменения размера в scss, зависимо от размера дисплея
Вариант 1
$vw-viewport: 1440; $mobile-viewport: 320; @function calcFluidFontSize($f-min, $f-max) { $k: calc(($f-max - $f-min) / ($vw-viewport - $mobile-viewport)); $b: $f-min - $k * $mobile-viewport; $b: $b * 1px; @return calc( #{$k} * 100vw + #{$b} );
Вариант 2
$vw-viewport: 1920; $mobile-viewport: 320; @function calcFluidFontSize($f-min, $f-max) { $k: ($f-max - $f-min)/($vw-viewport - $mobile-viewport); $b: $f-min - $k * $mobile-viewport; $b: $b * 1px; @return calc( #{$k} * 100vw + #{$b} ); }
Пример использования
font-size: calcFluidFontSize(14, 32);
Первое число — размер для мобилок (для 320 px, как мы задали), а второе для десктопа соответственно (1920px).
Разъяснения
Два варианта потому, что один из них может не работать. Скорее всего связано с от версии модулей, которые по-разному читают миксины.