CSS формула без медиа запроса
font-size: calc(24px + 16 * ((100vw - 320px) / (1280 - 320)));
SCSS Миксин:
$maxWidth: 1280;/* Максимальная ширина шаблона */
@mixin adaptiv-font($pcSize, $mobSize) {
$addSize: $pcSize - $mobSize;
$maxWidth: $maxWidth - 320;
font-size: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
}
h1{
font-weight: 900;
/*Адаптивный шрифт миксин */
@include adaptiv-font(40, 24);
/* 40 - размер шрифта по макету у заголовка h1 */
/* 24 - самый минимальный размер шрифта */
}
h2{
font-weight: 900;
/*Адаптивный шрифт миксин */
@include adaptiv-font(30, 18);
/* 30 - размер шрифта по макету у заголовка h2 */
/* 18 - самый минимальный размер шрифта */
}
h3{
font-weight: 900;
/*Адаптивный шрифт миксин */
@include adaptiv-font(18, 14);
/* 18 - размер шрифта по макету у заголовка h3 */
/* 14 - самый минимальный размер шрифта */
}