Адаптивный шрифт

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 - самый минимальный размер шрифта */
}
Прокрутить вверх