इस उपकरण के बारे में
CSS Clamp जनरेटर न्यूनतम मान, व्यूपोर्ट के अनुसार बदलने वाले वांछित मान और अधिकतम मान से CSS clamp() बनाता है। इससे आकार उपयुक्त सीमाओं के भीतर बदलता है। पेज पर तुरंत टेक्स्ट प्रीव्यू और स्पष्ट CSS आउटपुट मिलता है।
कैसे इस्तेमाल करें
- जनरेशन मोड चुनें और उसके अनुसार आकार व इकाइयाँ भरें।
- सुनिश्चित करें कि न्यूनतम मान अधिकतम मान से बड़ा न हो।
- आउटपुट और टेक्स्ट प्रीव्यू देखें। फ़्लूइड मोड में छोटे से बड़े व्यूपोर्ट का अंतराल भी देना होगा।
- CSS कॉपी करें और अपने प्रोजेक्ट में अलग-अलग व्यूपोर्ट चौड़ाइयों पर जाँचें।
उदाहरण
- clamp(16px, 2vw, 32px) फ़ॉन्ट आकार को 16–32px तक सीमित रखता है।
- आकार 16→32px और व्यूपोर्ट 320→1200px होने पर फ़्लूइड सूत्र दोनों अंतिम बिंदुओं पर क्रमशः 16px और 32px देता है।
- तय व्यूपोर्ट सीमा से बाहर आकार न्यूनतम या अधिकतम सीमा पर रुक जाता है।
font-size: clamp(16px, 2vw, 32px);
/* 16px at 320px viewport; 32px at 1200px viewport */
font-size: clamp(16px, calc(10.181818px + 1.818182vw), 32px);कार्यविधि और CSS विवरण
clamp(min, preferred, max) न्यूनतम और अधिकतम सीमा के बीच वांछित मान अपनाता है। फ़्लूइड गणना में slope = (maxSize − minSize) / (maxViewport − minViewport) और intercept = minSize − slope × minViewport होता है। वांछित मान calc(intercept px + slope × 100vw) है।
सामान्य उपयोग
- न्यूनतम और अधिकतम सीमा वाले रिस्पॉन्सिव शीर्षक बनाना।
- दो फ़ॉन्ट आकारों को रैखिक इंटरपोलेशन से जोड़ना।
- केवल फ़ॉन्ट आकार बदलने के लिए अतिरिक्त मीडिया क्वेरी की ज़रूरत घटाना।
गोपनीयता
इनपुट की प्रोसेसिंग, गणना, CSS बनाना और प्रीव्यू, सब आपके ब्राउज़र में होता है। आपकी सामग्री अपलोड नहीं होती। किसी बैकएंड, डेटाबेस, ऑनलाइन API या तीसरे पक्ष के CDN का इस्तेमाल नहीं होता और आपका इनपुट अपने आप सेव नहीं होता।
FAQ
CSS clamp() क्या है?
clamp() एक CSS गणितीय फ़ंक्शन है जो बीच के वांछित मान को निचली और ऊपरी सीमा में रखता है।
तीनों मान क्या दर्शाते हैं?
क्रमशः न्यूनतम, वांछित और अधिकतम मान। यह उपकरण आकारों और इकाइयों की जाँच करता है तथा उलटी सीमाएँ स्वीकार नहीं करता।
यह रिस्पॉन्सिव फ़ॉन्ट के लिए उपयुक्त क्यों है?
वांछित मान में vw इस्तेमाल करने से वह व्यूपोर्ट के साथ बदलता है। दोनों सीमाएँ टेक्स्ट को बहुत छोटा या बहुत बड़ा होने से रोकती हैं।
फ़्लूइड मोड को दो अलग व्यूपोर्ट क्यों चाहिए?
दो व्यूपोर्ट रैखिक इंटरपोलेशन का अंतराल तय करते हैं। अधिकतम व्यूपोर्ट न्यूनतम से बड़ा होना चाहिए, ताकि शून्य से भाग या उलटा अंतराल न बने।
किन ब्राउज़र में clamp() चलता है?
प्रमुख आधुनिक ब्राउज़र इसे व्यापक रूप से सपोर्ट करते हैं। पुराने ब्राउज़र के लिए clamp() घोषणा से पहले एक स्थिर आकार दे सकते हैं।