Типография с видовым пространством с минимальным и максимальным размерами онлайн урок.


Объявление размеров шрифта в единицах просмотра может привести к действительно интересным результатам, но оно имеет проблемы. В CSS нет свойствmin-font-sizeилиmax-font-size, поэтому проблемы с краем, когда текст становится слишком маленьким или слишком большим, с этим трудно справиться.

Этот Sass mixin использует медиа-запросы для определения минимального и максимального размера шрифта в пикселях. Он также поддерживает необязательный параметр, который служит откатом для браузеров, которые не поддерживают единицы просмотра.

В качестве примера вы определяете шрифт как5vw, ограниченный между35pxи150px(с отступлением50pxдля не поддерживающих браузеров):

@include responsive-font(5vw, 35px, 150px, 50px);

И вот полный микс:

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

# Демонстрация

См. Типографику Pen Viewport с минимальными и максимальными размерами Эдуардо Буса ( @eduardoboucas ) на CodePen .