Τυπογραφία μεγέθους θύρας με ελάχιστα και μέγιστα μεγέθη - CSS-Κόλπα

Η δήλωση μεγεθών γραμματοσειρών σε μονάδες προβολής μπορεί να παράγει πραγματικά ενδιαφέροντα αποτελέσματα, αλλά έρχεται με προκλήσεις. Δεν υπάρχουν min-font-sizeή max-font-sizeιδιότητες στο CSS, οπότε οι ακραίες περιπτώσεις όπου το κείμενο γίνεται πολύ μικρό ή πολύ μεγάλο είναι δύσκολο να αντιμετωπιστούν.

Αυτό το Sass mixin χρησιμοποιεί ερωτήματα πολυμέσων για να καθορίσει ένα ελάχιστο και μέγιστο μέγεθος για τη γραμματοσειρά, σε pixel. Υποστηρίζει επίσης μια προαιρετική παράμετρο που χρησιμεύει ως εναλλακτική λύση σε προγράμματα περιήγησης που δεν υποστηρίζουν μονάδες θύρας προβολής.

Για παράδειγμα, με αυτόν τον τρόπο θα ορίζατε μια γραμματοσειρά ως 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; )