CSS clamp() कैलकुलेटर
छोटी और बड़ी स्क्रीन के लिए एक-एक साइज़ दें और बीच में स्मूथली स्केल होने वाली रिस्पॉन्सिव clamp() वैल्यू पाएं — font size, padding, margin या gap, हर जगह काम आती है।
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)नतीजे के बीच वाले हिस्से में एक rem अंश रहता है, इसलिए कोई 200% तक ज़ूम करे तब भी टेक्स्ट बड़ा होता है — सिर्फ़ viewport यूनिट वाली वैल्यू ऐसा नहीं कर पाती।
फ़्लूइड टेक्स्ट, बिलकुल सही आकार।
हिसाब पूरी तरह आपके ब्राउज़र में होता है। यहाँ जो भी डालते हैं वह BroBroGo पर अपलोड नहीं होता।
अक्सर पूछे जाने वाले सवाल
clamp() वैल्यू कैसे बनती है?
आप दो पॉइंट देते हैं: छोटी स्क्रीन चौड़ाई पर एक साइज़, और बड़ी स्क्रीन चौड़ाई पर एक साइज़। टूल इन दोनों के बीच एक सीधी रेखा खींचता है, ताकि स्क्रीन चौड़ी होने पर साइज़ स्मूथली बढ़े, और उसे clamp() में लपेट देता है ताकि वह न आपकी छोटी-स्क्रीन साइज़ से नीचे जाए और न बड़ी-स्क्रीन साइज़ से ऊपर। दोनों चौड़ाइयों के बीच साइज़ फ़्लूइड तरीके से स्केल होता है; उनके बाहर वह सबसे नज़दीकी सीमा पर रुक जाता है।
नतीजा px की जगह rem और vw में क्यों आता है?
सीमाएँ rem में हैं और बीच का बदलता हिस्सा भी एक rem अंश रखता है, इसलिए जब कोई रीडर ज़ूम करता है या ब्राउज़र का डिफ़ॉल्ट font size बढ़ाता है तो टेक्स्ट फिर भी बड़ा होता है — सिर्फ़ px या सिर्फ़ viewport यूनिट वाली वैल्यू ऐसा नहीं कर पाती। आप साइज़ px में डालते हैं क्योंकि ज़्यादातर लोग ऐसे ही सोचते हैं, और टूल आपके root font size से उसे rem में बदल देता है।
क्या इसे सिर्फ़ font size नहीं, spacing के लिए भी इस्तेमाल कर सकते हैं?
हाँ। यही वैल्यू padding, margin, gap, width या height — जहाँ भी लंबाई चाहिए — वहाँ काम करती है। प्रीव्यू को “बॉक्स” पर ले जाएँ तो टेक्स्ट की जगह spacing बढ़ता दिखेगा। अगर आपकी छोटी और बड़ी साइज़ एक जैसी हों तो नतीजा एक तय (fixed) लंबाई बन जाता है, क्योंकि स्केल करने को कुछ बचता ही नहीं।
क्या सभी ब्राउज़र clamp() सपोर्ट करते हैं?
हाँ — 2020 से हर मौजूदा ब्राउज़र clamp() सपोर्ट करता है, तो वैल्यू सीधे इस्तेमाल कर सकते हैं, किसी fallback की ज़रूरत नहीं। अगर max बहुत बड़ा हो या बदलाव बहुत तेज़ हो, तो 200% ज़ूम पर एक बार देख लें कि जिन्हें ज़रूरत है उनके लिए टेक्स्ट अब भी बड़ा होता है।