以视口单位声明字体大小会产生非常有趣的结果,但这确实带来了挑战。 CSS中没有min-font-size
或max-font-size
属性,因此难以处理文本过小或过大的情况。
该Sass mixin利用媒体查询来定义字体的最小和最大大小(以像素为单位)。 它还支持一个可选参数,以作为不支持视口单位的浏览器的后备。
例如,这是将字体定义为5vw
限制在35px
和150px
之间(对于不支持的浏览器,回退为50px
):
@include responsive-font(5vw, 35px, 150px, 50px);
这是完整的mixin:
///
/// Viewport sized typography with minimum and maximum values
///
/// @author Eduardo Boucas (@eduardoboucas)
///
/// @param {Number} $responsive - Viewport-based size
/// @param {Number} $min - Minimum font size (px)
/// @param {Number} $max - Maximum font size (px)
/// (optional)
/// @param {Number} $fallback - Fallback for viewport-
/// based units (optional)
///
/// @example scss - 5vw font size (with 50px fallback),
/// minumum of 35px and maximum of 150px
/// @include responsive-font(5vw, 35px, 150px, 50px);
///
@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
$responsive-unitless: $responsive / ($responsive - $responsive + 1);
$dimension: if(unit($responsive) == 'vh', 'height', 'width');
$min-breakpoint: $min / $responsive-unitless * 100;
@media (max-#{$dimension}: #{$min-breakpoint}) {
font-size: $min;
}
@if $max {
$max-breakpoint: $max / $responsive-unitless * 100;
@media (min-#{$dimension}: #{$max-breakpoint}) {
font-size: $max;
}
}
@if $fallback {
font-size: $fallback;
}
font-size: $responsive;
}
演示版
请参阅CodePen上EduardoBouças ( @eduardoboucas ) 撰写的Pen Viewport大小的字体,其中包含最小和最大尺寸 。
翻译自: https://css-tricks.com/snippets/sass/viewport-sized-typography-minimum-maximum-sizes/