न्यूनतम और अधिकतम आकार के साथ व्यूपोर्ट आकार की टाइपोग्राफी - सीएसएस-ट्रिक्स

व्यूपोर्ट इकाइयों में फ़ॉन्ट आकार की घोषणा करने से वास्तव में दिलचस्प परिणाम मिल सकते हैं, लेकिन यह चुनौतियों के साथ आता है। CSS में कोई गुण min-font-sizeया max-font-sizeगुण नहीं हैं , इसलिए किनारे के मामले जहाँ पाठ बहुत छोटा या बहुत बड़ा हो जाता है, उनसे निपटना मुश्किल होता है।

यह सास मिक्सिन, पिक्सल्स में फॉन्ट के लिए न्यूनतम और अधिकतम आकार को परिभाषित करने के लिए मीडिया क्वेरी का उपयोग करता है। यह एक वैकल्पिक पैरामीटर का भी समर्थन करता है जो व्यूपोर्ट इकाइयों का समर्थन नहीं करने वाले ब्राउज़रों को कमबैक के रूप में कार्य करता है।

एक उदाहरण के रूप में, यह है कि आप एक फ़ॉन्ट को कैसे परिभाषित 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; )