Оголошення розмірів шрифту в одиницях вікна перегляду може дати справді цікаві результати, але це має складні завдання. У CSS немає min-font-sizeабо max-font-sizeвластивостей, тому крайні випадки, коли текст стає замалим або занадто великим, важко розглянути.
Цей мікс Sass використовує медіа-запити для визначення мінімального та максимального розміру шрифту в пікселях. Він також підтримує необов'язковий параметр, який служить резервним варіантом для браузерів, які не підтримують одиниці області перегляду.
Як приклад, ось як ви визначили шрифт як 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.