CSS Clamp() कैलकुलेटर

CSS clamp(MIN, PREFERRED, MAX) एक घोषणा को media queries के पूरे ढेर की जगह लेने देता है: मान सबसे छोटे व्यूपोर्ट के नीचे MIN पर, सबसे बड़े के ऊपर MAX पर रहता है, और बीच में सहजता से स्केल करता है। मुश्किल हिस्सा PREFERRED पद है — एक व्यूपोर्ट-सापेक्ष अभिव्यक्ति जैसे 0.833rem + 0.833vw — जिसे कोई भी हाथ से निकालना नहीं चाहता। यह कैलकुलेटर चार संख्याओं से इसकी वास्तविक गणना करता है: एक न्यूनतम साइज़, एक अधिकतम साइज़, और वह व्यूपोर्ट चौड़ाई जिस पर प्रत्येक लागू होता है।

हर मध्यवर्ती संख्या दिखाई जाती है, न कि केवल अंतिम पंक्ति: स्लोप (व्यूपोर्ट के प्रति पिक्सेल मान कितनी साइज़ इकाइयाँ बढ़ता है), वही स्लोप vw गुणांक के रूप में व्यक्त, और y-अक्ष इंटरसेक्शन — vw पद में जोड़ा गया स्थिरांक ताकि रेखा ठीक उन दो बिंदुओं से होकर गुज़रे जो आपने निर्दिष्ट किए हैं। जिस किसी ने भी किसी ट्यूटोरियल से बिना समझे कोई clamp() मान पेस्ट किया है, वह यहाँ वास्तविक अंकगणित देख और जाँच सकता है।

एक व्यूपोर्ट-चौड़ाई स्लाइडर एक लाइव प्रीव्यू बॉक्स चलाता है, इसलिए फ़्लूड स्केलिंग दृश्यमान है, न कि केवल गणना की गई: इसे min और max ब्रेकपॉइंट के बीच खींचें और देखें कि सैंपल टेक्स्ट ठीक वैसे ही रीसाइज़ होता है जैसे असली ब्राउज़र विंडो को रीसाइज़ करने पर होता। आउटपुट लाइन और विवरण हर कीस्ट्रोक पर अपडेट होते हैं — यह स्वाभाविक रूप से px to rem कन्वर्टर के साथ जुड़ता है जब बेस फ़ॉन्ट साइज़ को भी बदलने की ज़रूरत होती है।

एक चरण में एक पूर्ण फ़्लूड टाइपोग्राफ़ी सिस्टम के लिए टाइप-स्केल मोड पर स्विच करें: एक बेस साइज़ और एक मॉड्यूलर अनुपात (1.125 से 1.5 तक) दर्ज करें और छह साइज़ पाएँ — small, base, h4, h3, h2 और h1 — प्रत्येक की गणना एक हल्की मोबाइल प्रगति और पूर्ण डेस्कटॉप अनुपात के बीच अपनी स्वयं की clamp() लाइन के रूप में की जाती है, जो CSS कस्टम प्रॉपर्टीज़ के एक ब्लॉक के रूप में कॉपी करने के लिए तैयार है।