द्रव टाइपोग्राफी - सीएसएस-ट्रिक्स

कोड का अधिकार प्राप्त करना, यहाँ एक कार्यान्‍वयन है:

html ( font-size: 16px; ) @media screen and (min-width: 320px) ( html ( font-size: calc(16px + 6 * ((100vw - 320px) / 680)); ) ) @media screen and (min-width: 1000px) ( html ( font-size: 22px; ) )

यह व्यावहारिक, क्लैम्पड, व्यूपोर्ट-आधारित प्रकार के आकार के लिए हमारे अधिक हालिया पोस्ट सरलीकृत द्रव टाइपोग्राफी को देखने के लायक है।

यह font-sizeन्यूनतम 16px (320px व्यूपोर्ट में) से अधिकतम 22px (1000px व्यूपोर्ट में) होगा। यहाँ उस का एक डेमो है, लेकिन एक Sass @mixin के रूप में (जिसे हम बाद में कवर करेंगे)।

कोडपेन पर क्रिस कॉयर (@chriscoyier) द्वारा फ्लुइड टाइप डब्ल्यू सैस का पेन बेस उदाहरण देखें।

सैस का उपयोग सिर्फ उस आउटपुट को उत्पन्न करने के लिए थोड़ा आसान बनाने के लिए किया गया था, और इस तथ्य में कि गणित की एक मुस्कुराहट शामिल है। चलो एक नज़र मारें।

व्यूपोर्ट इकाइयों का उपयोग करके calc(), हमारे पास फ़ॉन्ट-आकार (और अन्य गुण) हो सकते हैं, स्क्रीन के आकार के आधार पर उनके आकार को समायोजित कर सकते हैं। इसलिए हमेशा एक ही आकार होने के बजाय, या मीडिया के प्रश्नों पर एक आकार से दूसरे आकार में कूदने से, आकार तरल हो सकता है।

यहाँ गणित, क्रेडिट माइक Riethmuller है:

body ( font-size: calc((minimum size) + ((maximum size) - (minimum size)) * ((100vw - (minimum viewport width)) / ((maximum viewport width) - (minimum viewport width)))); )

कारण यह है कि गणित थोड़ा जटिल है कि हम टाइप करने से बचने की कोशिश कर रहे हैं जो हमारे न्यूनतम से कम हो या हमारी अधिकतम से बड़ी हो, जो व्यूपोर्ट इकाइयों के साथ करना बहुत आसान है।

उदाहरण के लिए, यदि हम अपने फ़ॉन्ट आकार को उस श्रेणी में चाहते हैं, जहां 14pxसबसे छोटी व्यूपोर्ट चौड़ाई में न्यूनतम आकार है 300pxऔर जहां 26pxका सबसे बड़ा व्यूपोर्ट चौड़ाई में अधिकतम आकार है 1600px, तो हमारा समीकरण इस तरह दिखता है:

body ( font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); )

टेक्स्ट व्यूपोर्ट की चौड़ाई में तरल रूप से बदलता है

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन JEVevK देखें।

उन न्यूनतम और अधिकतम आकारों में लॉक करने के लिए, मीडिया क्वेरी के भीतर इस गणित का उपयोग करने से मदद मिलती है। यहाँ कुछ Sass बाहर की मदद करने के लिए है ...

सास में

आप इस तरह एक (बहुत मजबूत) मिश्रण बना सकते हैं:

@function strip-unit($value) ( @return $value / ($value * 0 + 1); ) @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) ( $u1: unit($min-vw); $u2: unit($max-vw); $u3: unit($min-font-size); $u4: unit($max-font-size); @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 ( & ( font-size: $min-font-size; @media screen and (min-width: $min-vw) ( font-size: calc(#($min-font-size) + #(strip-unit($max-font-size - $min-font-size)) * ((100vw - #($min-vw)) / #(strip-unit($max-vw - $min-vw)))); ) @media screen and (min-width: $max-vw) ( font-size: $max-font-size; ) ) ) )

जो आप इस तरह का उपयोग करते हैं:

$min_width: 320px; $max_width: 1200px; $min_font: 16px; $max_font: 24px; html ( @include fluid-type($min_width, $max_width, $min_font, $max_font); )

यहाँ माइक के अन्य उदाहरण दिए गए हैं, जिनमें ठीक-ठीक तरल पदार्थ की लय मिल रही है:

मॉड्यूलर स्केल के साथ हेडर्स को आइडिया देना

मॉड्यूलर पैमाने, जिसका अर्थ है कि अधिक स्थान उपलब्ध है, आकार में भिन्न नाटकीय रूप से अधिक है। शायद सबसे बड़े व्यूपोर्ट में, प्रत्येक शीर्षलेख प्रत्येक शीर्ष से 1.4 गुना बड़ा है, लेकिन सबसे छोटा है, केवल 1.05x पर।

नज़ारा देखो:

"द्रव प्रकार" i̶n̶s̶p̶i̶r̶e̶d from @MikeRiethmuller से चुराए गए अब @CodePen ब्लॉग पर रहते हैं। सहित "द्रव मॉड्यूलर स्केल!" pic.twitter.com/0yJk8Iq8fR

- क्रिस कॉयियर (@chriscoyier) 27 अक्टूबर, 2016

हमारे सास मिक्सिन के साथ, जैसा दिखता है:

$mod_1: 1.2; // mobile $mod_2: 1.5; // desktop h1 ( font-size: $mod_1*$mod_1*$mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font); ) h2 ( font-size: $mod_1*$mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font); ) h3 ( font-size: $mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1 *$min_font, $mod_2*$mod_2 *$min_font); )