Mendeklarasikan ukuran font dalam unit viewport dapat menghasilkan hasil yang sangat menarik, tetapi ada tantangannya. Tidak ada min-font-sizeatau max-font-sizeproperti di CSS, jadi kasus tepi di mana teks menjadi terlalu kecil atau terlalu besar sulit untuk ditangani.
Mixin Sass ini menggunakan kueri media untuk menentukan ukuran minimum dan maksimum font, dalam piksel. Ini juga mendukung parameter opsional untuk berfungsi sebagai fallback ke browser yang tidak mendukung unit viewport.
Sebagai contoh, berikut adalah cara Anda mendefinisikan font sebagai 5vwdibatasi antara 35pxdan 150px(dengan pengganti 50pxuntuk browser yang tidak mendukung):
@include responsive-font(5vw, 35px, 150px, 50px);Dan inilah mixin lengkapnya:
/// /// 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; )Demo
Lihat tipografi ukuran Pen Viewport dengan ukuran minimum dan maksimum oleh Eduardo Bouças (@eduardoboucas) di CodePen.