Skip to content

Instantly share code, notes, and snippets.

@kcelsi
Created July 3, 2020 08:48
Show Gist options
  • Save kcelsi/da598fdd57b8371da59ed455f63e10e7 to your computer and use it in GitHub Desktop.
Save kcelsi/da598fdd57b8371da59ed455f63e10e7 to your computer and use it in GitHub Desktop.
@mixin adaptive-font ($min-font, $min-width, $max-font, $max-width) {
// https://habr.com/ru/company/mailru/blog/315196/
// 110px - 28px = 82px
$different-fonts: $max-font - $min-font;
// 1920 - 320px = 1600px
$different-width: $max-width - $min-width;
// 82 / 1600 = 0.05px
$coefficient-px: $different-fonts / $different-width;
// 28 - 0.05 * 320 = 12
$coefficient: $min-font - $coefficient-px * $min-width;
// calc(0.05 * 100vw + 12px)
//
font-size: $min-font; //размер шрифта на $min-width и ниже разрешении экрана
@media (min-width: $min-width) {
font-size: calc(#{$coefficient-px} * 100vw + #{$coefficient});
}
@media (min-width: $max-width) {
font-size: $max-font; //размер шрифта на $max-width и выше разрешении экрана
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment