मुफ़्त CSS क्लैंप() जेनरेटर

यह कैसे काम करता है

यह टूल एक हाथ से लिखे लीनियर इंटरपोलेशन फ़ॉर्मूले का उपयोग करके CSS clamp() वैल्यू गणना करता है — कोई लाइब्रेरी नहीं, कोई सर्वर राउंड-ट्रिप नहीं। आप दो साइज़ और दो व्यूपोर्ट चौड़ाइयाँ दर्ज करते हैं; गणित तुरंत आपके ब्राउज़र में चलता है और एक vw-आधारित पसंदीदा वैल्यू के साथ पेस्ट-रेडी clamp() एक्सप्रेशन बनाता है जो उन ब्रेकपॉइंटों के बीच आपके टाइप या स्पेसिंग को सुचारू रूप से स्केल करता है।

1. 1
   लीनियर स्लोप गणना

   टूल एक पिक्सेल-प्रति-पिक्सेल स्लोप गणना करता है: (maxSize - minSize) / (maxViewport - minViewport)। यह स्लोप फिर 100 से गुणा करके vw यूनिट में बदला जाता है, जो CSS व्यूपोर्ट-रिलेटिव स्केलिंग के काम करने का मूल है।
2. 2
   इंटरसेप्ट निकालना

   एक इंटरसेप्ट ऑफ़सेट (px या rem में) गणना की जाती है ताकि लीनियर फ़ंक्शन न्यूनतम व्यूपोर्ट पर बिल्कुल आपके न्यूनतम साइज़ को हिट करे। साथ में, स्लोप और इंटरसेप्ट clamp() के अंदर पसंदीदा वैल्यू बनाते हैं — वह हिस्सा जो वास्तव में स्केल करता है।
3. 3
   यूनिट कन्वर्ज़न और आउटपुट फ़ॉर्मेटिंग

   अगर आप rem आउटपुट चुनते हैं, clamp() स्ट्रिंग में लिखे जाने से पहले हर पिक्सेल वैल्यू आपके कॉन्फ़िगर किए रूट फ़ॉन्ट साइज़ (डिफ़ॉल्ट 16px) से भाग की जाती है। एक मिलती-जुलती Tailwind arbitrary-value क्लास भी बनाई जाती है, Tailwind के सिंटैक्स के अनुसार स्पेस को अंडरस्कोर से बदला जाता है।
4. 4
   लाइव व्यूपोर्ट स्लाइडर प्रीव्यू

   एक रेंज स्लाइडर आपको 320px से 1920px चौड़ाई तक स्क्रब करने देता है। हर पोज़िशन पर वही स्लोप-और-इंटरसेप्ट फ़ॉर्मूला रीयल टाइम में क्लैम्प्ड साइज़ मूल्यांकित करता है और उस गणना की गई पिक्सेल साइज़ पर सैंपल टेक्स्ट रेंडर करता है, ताकि आप कुछ भी कॉपी करने से पहले स्केलिंग व्यवहार देख सकें।

संबंधित टूल