Функция (миксин) для изменения размера в 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).

Разъяснения

Два варианта потому, что один из них может не работать. Скорее всего связано с от версии модулей, которые по-разному читают миксины.

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *