Menyatakan ukuran fon dalam unit pandang boleh menghasilkan hasil yang sangat menarik, tetapi memang menghadapi cabaran. Tidak ada min-font-sizeatau max-font-sizesifat dalam CSS, jadi kes kelebihan di mana teks menjadi terlalu kecil atau terlalu besar sukar ditangani.
Campuran Sass ini menggunakan pertanyaan media untuk menentukan ukuran minimum dan maksimum untuk font, dalam piksel. Ini juga menyokong parameter pilihan untuk berfungsi sebagai pengganti penyemak imbas yang tidak menyokong unit pandang.
Sebagai contoh, ini adalah bagaimana anda menentukan fon sebagai 5vwterhad antara 35pxdan 150px(dengan penggantian 50pxuntuk penyemak imbas yang tidak menyokong):
@include responsive-font(5vw, 35px, 150px, 50px);Dan inilah gabungan penuh:
/// /// 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 berukuran Pen Viewport dengan ukuran minimum dan maksimum oleh Eduardo Bouças (@eduardoboucas) di CodePen.