Skip to content

Instantly share code, notes, and snippets.

@curtisbelt
Last active December 4, 2016 09:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save curtisbelt/250f4c9ee79dead32664a4bb3cf0a5bb to your computer and use it in GitHub Desktop.
Save curtisbelt/250f4c9ee79dead32664a4bb3cf0a5bb to your computer and use it in GitHub Desktop.
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