Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Responsive Font Mixin
$viewport-desktop-size: 1366;
$viewport-mobile-size: 320;
// Given a range of font sizes ( $mobile-font-size and $desktop-font-size ), apply break points evenly from mobile to desktop widths
@mixin responsive-font( $mobile-font-size, $desktop-font-size, $line-height-buffer: 2 ) {
$number-of-breakpoints-required: $desktop-font-size - $mobile-font-size;
$maximum-viewport-range: $viewport-desktop-width - $viewport-mobile-width;
$breakpoint-multiplier: $maximum-viewport-range / $number-of-breakpoints-required;
font-size: #{$mobile-font-size}px;
line-height: #{$mobile-font-size + $line-height-buffer}px;
@for $iteration from 1 through $number-of-breakpoints-required {
@media ( min-width: #{$viewport-mobile-width + ( $breakpoint-multiplier * $iteration )}px ) {
font-size: #{$mobile-font-size + $iteration}px;
line-height: #{$mobile-font-size + $iteration + $line-height-buffer}px;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment