डिज़ाइन / रिस्पॉन्सिव
फ्लूइड टाइपोग्राफी और स्पेसिंग के लिए CSS Clamp() जनरेटर
सबसे छोटा और सबसे बड़ा आकार, साथ ही लागू होने वाली viewport चौड़ाइयाँ दर्ज करें। सामान्य स्क्रीन चौड़ाइयों पर आकारों की तालिका के साथ rem में smoothly scale होने वाला clamp() एक्सप्रेशन पाएँ।
फ्लूइड टाइपोग्राफी और स्पेसिंग के लिए CSS Clamp() जनरेटर: यह टूल दो बिंदुओं के बीच एक सीधी रेखा बनाता है: 320 px viewport पर 16 px से 1280 px पर 24 px तक, आकार हर 100 px चौड़ाई पर 0.8333 px बढ़ता है। इस रेखा को एक निश्चित rem भाग और एक vw भाग, 0.8333rem + 0.8333vw, के रूप में लिखा जाता है; clamp() इस सीमा के बाहर इसे 1rem और 1.5rem के बीच रखता है। यह आपके ब्राउज़र में 100% स्थानीय रूप से चलता है और सर्वर पर कोई फ़ाइल अपलोड नहीं होती।
- श्रेणी
- डेवलपर टूल्स
- रन
- आपके ब्राउज़र में
- लागत
- मुफ़्त · साइन अप की ज़रूरत नहीं
- उपलब्धता
- इस्तेमाल के लिए तैयार
पूरी तरह आपके ब्राउज़र में चलता है
CSS
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
| व्यूपोर्ट की चौड़ाई | आकार |
|---|---|
| 320 px | 16 px |
| 375 px | 16.46 px |
| 768 px | 19.73 px |
| 800 px | 20 px |
| 1024 px | 21.87 px |
| 1280 px | 24 px |
| 1440 px | 24 px |
| 1920 px | 24 px |
clamp() का मध्य मान आपके दिए गए दो बिंदुओं से होकर गुजरने वाली सीधी रेखा है: यह व्यूपोर्ट की चौड़ाई के एक हिस्से में तय rem मात्रा जोड़ता है, जिससे आकार दोनों चौड़ाइयों के बीच आसानी से बदलता है और इनके बाहर सीमाओं पर रुक जाता है। तय हिस्से के लिए rem का उपयोग करने से आकार पाठक की अपनी फ़ॉन्ट-आकार सेटिंग के अनुसार responsive रहता है। यह किसी भी लंबाई के लिए काम करता है: फ़ॉन्ट आकार, padding, गैप या मार्जिन।
उदाहरण सहित गणना
375 px के फ़ोन पर 32 px और 1440 px के desktop पर 48 px वाले heading के लिए slope 16 ÷ 1065 = 1.5023 px per 100 px है, और expression clamp(2rem, 1.6479rem + 1.5023vw, 3rem) है। 800 px के tablet पर heading 38.38 px का होगा।
सुलभता
WCAG के अनुसार टेक्स्ट को 200% तक zoom किया जा सकना चाहिए। Fluid size का कुछ हिस्सा viewport पर निर्भर होने के कारण, बहुत steep slopes से zoom करने पर टेक्स्ट बहुत बड़ा नहीं हो पाता; सबसे बड़ा size, सबसे छोटे size का लगभग 2.5 गुना से अधिक न रखें और एकसमान steps चुनने के लिए टाइप स्केल इस्तेमाल करें।
इस्तेमाल करने का तरीका
- सबसे छोटा और सबसे बड़ा आकार px में दर्ज करें।
- वे viewport चौड़ाइयाँ दर्ज करें जिन पर ये आकार लागू होने चाहिए।
- clamp() वैल्यू कॉपी करें और तालिका में आकार जाँचें।
गोपनीयता और सीमाएँ
आपके ब्राउज़र में गणना होती है।
संबंधित टूल्स
अक्सर पूछे जाने वाले सवाल
सिर्फ़ vw का इस्तेमाल क्यों न करें?
केवल vw में दिया गया आकार पाठक की फ़ॉन्ट-साइज़ सेटिंग को नज़रअंदाज़ करता है और फ़ोन पर बहुत छोटा या चौड़ी स्क्रीन पर बहुत बड़ा हो सकता है। clamp() में rem भाग और सीमाएँ, दोनों समस्याएँ ठीक कर देती हैं।
क्या clamp() हर जगह काम करता है?
हाँ: 2020 से हर मौजूदा ब्राउज़र clamp() को सपोर्ट करता है।
क्या चौड़ी स्क्रीन पर आकार छोटा हो सकता है?
हाँ: smallest-width का बड़ा आकार दर्ज करें; ऐसी स्थिति में एक्सप्रेशन vw भाग को घटाता है।
मुफ़्त टूल · आपके ब्राउज़र में बार चलता है · अकाउंट की ज़रूरत नहीं