CSS clamp() जनरेटर

CSS clamp() जनरेटर क्या है?

CSS clamp() जनरेटर फ़्रंट-एंड डेवलपर्स और डिज़ाइनरों के लिए एक मुफ़्त फ़्लूइड-टाइपोग्राफ़ी कैलकुलेटर है। आप इसे एक न्यूनतम फ़ॉन्ट आकार, एक अधिकतम फ़ॉन्ट आकार, एक न्यूनतम व्यूपोर्ट चौड़ाई और एक अधिकतम व्यूपोर्ट चौड़ाई देते हैं; यह एक clamp(min, preferred, max) घोषणा लौटाता है जहाँ preferred मान एक rem ऑफ़सेट को vw ढलान के साथ मिलाता है, ताकि टेक्स्ट स्क्रीन के साथ रैखिक रूप से बढ़े और कभी आपकी सीमाओं से बाहर न जाए। यह स्तरित font-size मीडिया क्वेरी की ज़रूरत खत्म करता है और हर डिवाइस पर शीर्षक तथा मुख्य टेक्स्ट को रिस्पॉन्सिव रखता है। यह देखने के लिए कि मान कैसे रेंडर होता है एक प्रीव्यू आकार चुनें, आउटपुट इकाई को rem और px के बीच बदलें, और लाइन सीधे अपनी स्टाइलशीट में कॉपी करें।

CSS clamp() जनरेटर का उपयोग कैसे करें

1. न्यूनतम फ़ॉन्ट आकार दर्ज करें — वह आकार जो सबसे छोटी स्क्रीन पर टेक्स्ट का होना चाहिए।
2. अधिकतम फ़ॉन्ट आकार दर्ज करें — वह आकार जिस तक सबसे बड़ी स्क्रीन पर टेक्स्ट पहुँचना चाहिए।
3. वे न्यूनतम और अधिकतम व्यूपोर्ट चौड़ाइयाँ सेट करें जिनके बीच आकार को स्केल होना चाहिए।
4. यदि आप चाहें तो आउटपुट इकाई बदलने के लिए सेटिंग्स खोलें (rem सुलभता बनाए रखता है; px भी उपलब्ध है)।
5. उस व्यूपोर्ट पर नमूना टेक्स्ट रेंडर करने के लिए एक प्रीव्यू आकार चुनें, फिर लाइव clamp() मान पढ़ें।
6. उत्पन्न clamp() एक्सप्रेशन कॉपी करें और इसे अपनी CSS font-size में पेस्ट करें।

उदाहरण

न्यूनतम फ़ॉन्ट 16, अधिकतम फ़ॉन्ट 20, न्यूनतम vw 320, अधिकतम vw 1240

font-size: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);

न्यूनतम फ़ॉन्ट 32, अधिकतम फ़ॉन्ट 64, न्यूनतम vw 320, अधिकतम vw 1536

font-size: clamp(2rem, 1.474rem + 2.632vw, 4rem);

न्यूनतम फ़ॉन्ट 12, अधिकतम फ़ॉन्ट 14, न्यूनतम vw 480, अधिकतम vw 1280

font-size: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);

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

clamp() मान मीडिया क्वेरी के बिना कैसे स्केल होता है?

clamp(min, preferred, max) एक निचली सीमा, एक preferred (फ़्लूइड) मान और एक ऊपरी सीमा लेता है। preferred मान rem + vw रूप की एक रेखा है, जिसे इस तरह गणना किया जाता है कि फ़ॉन्ट न्यूनतम व्यूपोर्ट पर आपके न्यूनतम के बराबर हो और अधिकतम व्यूपोर्ट पर आपके अधिकतम के बराबर। उन चौड़ाइयों के बीच ब्राउज़र स्वतः इंटरपोलेट करता है, और उनके बाहर clamp() आकार को निकटतम सीमा पर पिन कर देता है — सब कुछ एक ही घोषणा में।

आउटपुट px के बजाय rem में क्यों है?

स्थिर हिस्सों के लिए rem का उपयोग उपयोगकर्ता की ब्राउज़र फ़ॉन्ट-आकार सेटिंग का सम्मान करता है, जो सुलभता के लिए बेहतर है। व्यूपोर्ट-सापेक्ष ढलान vw में व्यक्त किया जाता है। यदि आपके प्रोजेक्ट को निरपेक्ष इकाइयाँ चाहिए तो आप सेटिंग्स में इकाई को px में बदल सकते हैं, पर rem अनुशंसित डिफ़ॉल्ट है।

मुझे किस व्यूपोर्ट सीमा का उपयोग करना चाहिए?

एक सामान्य विकल्प है न्यूनतम के लिए आपकी सबसे छोटी समर्थित चौड़ाई (अक्सर 320px या 360px) और अधिकतम के लिए आपका सबसे चौड़ा कंटेंट कंटेनर (जैसे 1240px–1536px)। फ़ॉन्ट केवल उस सीमा के भीतर ही पूरी तरह फ़्लूइड होता है; उसके नीचे टेक्स्ट न्यूनतम पर रहता है और उसके ऊपर अधिकतम पर।

क्या यह केवल font-size के लिए नहीं, बल्कि किसी भी CSS लंबाई के लिए काम करता है?

हाँ। उत्पन्न clamp() मान बस एक लंबाई है, इसलिए आप इसे padding, margin, gap या लंबाई स्वीकार करने वाली किसी भी प्रॉपर्टी में पेस्ट कर सकते हैं। लेबल font-size का उल्लेख करते हैं क्योंकि फ़्लूइड टाइपोग्राफ़ी सबसे आम उपयोग है, पर स्पेसिंग के लिए गणित समान है।

क्या मेरा डेटा कहीं भेजा जाता है?

नहीं। गणना पूरी तरह आपके ब्राउज़र में JavaScript से चलती है — आपके फ़ॉन्ट आकार और व्यूपोर्ट चौड़ाइयाँ कभी किसी सर्वर पर अपलोड नहीं होतीं, इसलिए टूल निजी रूप से और पेज लोड होने के बाद ऑफ़लाइन भी काम करता है।