CSS क्लैंप जनरेटर: लचीला फ़ॉन्ट आकार और अंतर

इसका इस्तेमाल कैसे करें

प्रॉपर्टी चुनें और सबसे छोटा आकार तथा सबसे बड़ा आकार लिखें, फिर आकार की इकाई चुनें।
वह व्यूपोर्ट चौड़ाई जहाँ आकार सबसे छोटा है और वह व्यूपोर्ट चौड़ाई जहाँ आकार सबसे बड़ा है में दो चौड़ाइयाँ लिखें, और उनकी इकाई चुनें।
कहीं भी rem इस्तेमाल किया हो तो रूट फ़ॉन्ट आकार (px) जाँचें। जब तक साइट कोई और आकार तय न करे, ब्राउज़र 16 px इस्तेमाल करते हैं।
CSS घोषणा कॉपी करें, या हिसाब और आम चौड़ाइयों पर आकार देखें ताकि हर चौड़ाई पर परिणाम दिखे।

clamp() आकार को लचीला कैसे बनाता है

clamp(MIN, VAL, MAX) एक न्यूनतम, एक पसंदीदा मान और एक अधिकतम लेता है। CSS Values and Units specification कहता है कि यह ठीक उसी मान को दर्शाता है जो max(MIN, min(VAL, MAX)) है। इसलिए आकार कभी MIN से नीचे नहीं जाता या MAX से ऊपर नहीं उठता, और बीच में वह VAL का पालन करता है, जो यहाँ एक सीधी रेखा है जो व्यूपोर्ट चौड़ाई पर निर्भर है।

रेखा सबसे छोटे व्यूपोर्ट चौड़ाई पर सबसे छोटे आकार से सबसे चौड़ी व्यूपोर्ट चौड़ाई पर सबसे बड़े आकार तक जाती है। उन दो चौड़ाइयों के बाहर आकार वहीं टिका रहता है।

ढलान = (सबसे बड़ा आकार − सबसे छोटा आकार) / (सबसे बड़ा व्यूपोर्ट − सबसे छोटा व्यूपोर्ट);  अंतःखंड = सबसे छोटा आकार − ढलान × सबसे छोटा व्यूपोर्ट;  पसंदीदा मान = अंतःखंड + ढलान × 100vw

ढलान, अंतःखंड और vw पद

ढलान बताती है कि व्यूपोर्ट चौड़ाई के हर पिक्सल पर आकार कितना बढ़ता है। अंतःखंड वह बिंदु है जहाँ वही रेखा शून्य व्यूपोर्ट चौड़ाई से मिलती है। vw इकाई व्यूपोर्ट चौड़ाई का एक प्रतिशत है, इसलिए ढलान को 100 से गुणा करने पर वह पद मिलता है जो विंडो के साथ चलता है।

ढलान निकालने से पहले दोनों चौड़ाइयाँ और दोनों आकार पिक्सल में बदले जाते हैं। rem मान को रूट फ़ॉन्ट आकार से गुणा किया जाता है, इसलिए जब रूट 16 px हो तो वही डिज़ाइन rem में और px में एक जैसा परिणाम देता है।

सबसे बड़ा आकार सबसे छोटे के बराबर या उससे बड़ा रखें। टूल छोटा सबसे बड़ा आकार नहीं लेता, क्योंकि ऐसी रेखा स्क्रीन बड़ी होने पर सिकुड़ती।
vw पद विज़िटर की टेक्स्ट-आकार सेटिंग का पालन नहीं करता, पर rem का अंतःखंड करता है। पेज को 200 प्रतिशत ज़ूम पर जाँचें, और जहाँ हो सके अंतःखंड rem में रखें।

हल किया हुआ उदाहरण: 16 px से 24 px तक का फ़ॉन्ट

320 px के व्यूपोर्ट और 1200 px के व्यूपोर्ट के बीच फ़ॉन्ट 16 px से 24 px तक बढ़ता है। ढलान है (24 − 16) / (1200 − 320) = 8 / 880, जो चार दशमलव तक 0.0091 है। अंतःखंड है 16 − 0.0091 × 320 = 13.0909 px, और vw पद है 0.9091 vw।

मान है clamp(16px, 13.0909px + 0.9091vw, 24px), इसलिए CSS घोषणा है font-size: clamp(16px, 13.0909px + 0.9091vw, 24px);। rem इकाइयों में, 20rem से 75rem के बीच 1rem से 1.5rem, और रूट 16 px हो तो clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem) बनता है।

अक्सर पूछे जाने वाले सवाल

व्यूपोर्ट सबसे संकरे व्यूपोर्ट से छोटा हो तो आकार का क्या होता है?

आकार सबसे छोटे आकार पर टिका रहता है। clamp() का सूत्र मान को उसकी न्यूनतम सीमा से नीचे कभी नहीं जाने देता, इसलिए टेक्स्ट सबसे संकरी चौड़ाई के लिए तय किया गया आकार रखता है।

व्यूपोर्ट वाला हिस्सा vw में क्यों लिखा जाता है?

vw इकाई व्यूपोर्ट चौड़ाई का एक प्रतिशत है, इसलिए वह ब्राउज़र विंडो के बदलने के साथ बदलती है। पिक्सल या rem मान विंडो के साथ नहीं बदलते, और आकार उसके साथ नहीं चल सकता।

कोड कभी-कभी vw वाला हिस्सा पहले क्यों रखता है?

जब अंतःखंड ऋणात्मक हो, तो कोड vw वाला हिस्सा पहले लिखता है और अंतःखंड घटाता है, जो ज्यादा साफ पढ़ा जाता है। दोनों रूप एक ही मान देते हैं।

क्या यह मान padding, margin या gap के लिए इस्तेमाल हो सकता है?

हाँ। प्रॉपर्टी में padding, margin या gap चुनें। वही रेखा किसी भी लंबाई के लिए काम करती है, इसलिए अंतर भी फ़ॉन्ट आकार की तरह व्यूपोर्ट के साथ बढ़ता है।

clamp() किन ब्राउज़रों में चलता है?

सभी आज के प्रमुख ब्राउज़र clamp() सहारते हैं। अगर आपके विज़िटर पुराने संस्करण इस्तेमाल करते हैं, तो लचीले आकार पर भरोसा करने से पहले उन संस्करणों में पेज जाँचें।

क्या जो मैं लिखता हूँ वह कहीं सहेजा या भेजा जाता है?

नहीं। मान आपके ब्राउज़र में निकाला जाता है, और जो आप लिखते हैं वह हमारे सर्वर पर न सहेजा जाता है न भेजा जाता है। पेज छोड़ने से पहले घोषणा कॉपी कर लें।

स्रोत

आँकड़े और टेक्स्ट आखिरी बार मंगलवार, 10 नवंबर 2026 को जाँचे गए।

परिणाम

हिसाब