CSS Clamp() जनरेटर
एक मिनिमम और मैक्सिमम साइज़ और उनके लागू होने की व्यूपोर्ट रेंज सेट करें, और एक फ़्लूइड
clamp() वैल्यू पाएं जो इनके बीच स्मूदली स्केल होती है.
यह कैसे काम करता है
दो (व्यूपोर्ट, साइज़) पॉइंट्स मिलकर एक सीधी लाइन बनाते हैं. इसका स्लोप व्यूपोर्ट-विड्थ
कोएफ़िशिएंट बन जाता है, और इसका y-इंटरसेप्ट एक फ़िक्स्ड rem ऑफ़सेट बन जाता है, जो मिलकर
clamp(min, intercept + slope*100vw, max) बनाते हैं. चूंकि यह असली CSS है, कोई
JavaScript रीसाइज़ लिसनर नहीं, ब्राउज़र इसे हर लेआउट पास पर दोबारा कैलकुलेट करता है, बिना किसी
स्क्रॉल जैंक या ग़लत साइज़ के फ़्लैश के, और यह JavaScript बंद होने पर भी काम करता रहता है.
सभी वैल्यूज़ को आपके रूट फ़ॉन्ट साइज़ के हिसाब से rem में कन्वर्ट किया जाता है, इसलिए अगर किसी यूज़र ने एक्सेसिबिलिटी के लिए ब्राउज़र का बेस फ़ॉन्ट साइज़ बदला है तो भी नतीजा सही स्केल होता रहता है. यहां कुछ भी आपका पेज नहीं पढ़ता, यह सिर्फ़ आपके डाले नंबरों से फ़ॉर्मूला कैलकुलेट करता है.
सामान्य प्रश्न
clamp() असल में क्या करता है?
clamp(min, preferred, max) बीच वाली वैल्यू चुनता है, लेकिन इसे इस तरह क्लिप करता है कि यह कभी min से नीचे या max से ऊपर न जाए. यहां "preferred" वैल्यू व्यूपोर्ट विड्थ का एक लीनियर फ़ंक्शन है, इसलिए नतीजा स्क्रीन के साथ स्मूदली बढ़ता है जब तक किसी एक सीमा तक न पहुंच जाए, फिर स्थिर रहता है.
मीडिया क्वेरी की जगह इसका इस्तेमाल क्यों करें?
मीडिया क्वेरी तय ब्रेकपॉइंट्स पर फ़िक्स्ड साइज़ों के बीच सीधे कूदती है, जो एक विज़िबल स्नैप जैसा दिख सकता है. clamp() व्यूपोर्ट के साथ लगातार स्केल होता है, इसलिए विंडो को खींचने पर टेक्स्ट और स्पेसिंग स्मूदली रीसाइज़ होते हैं, और किसी ब्रेकपॉइंट को मेंटेन नहीं करना पड़ता.
क्या यह कहीं भेजा जाता है?
नहीं, फ़ॉर्मूला और प्रीव्यू पूरी तरह आपके ब्राउज़र में ही कैलकुलेट होते हैं. कुछ भी अपलोड नहीं होता.