scss 响应式字体混合

Posted 2021-05-18

$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;
		}
	}
}