श्रेणी: डेवलपर टूल
फ्लुइड स्पेसिंग स्केल जेनरेटर
clamp() पर आधारित स्पेसिंग टोकन का सेट बनाएँ
संकरे और चौड़े व्यूपोर्ट पर एक आधार स्पेसिंग आकार तथा एक स्केल अनुपात दें, और :root में पेस्ट करने के लिए तैयार --space-* कस्टम प्रॉपर्टी का पूरा सेट पाएँ, जिसमें हर एक अपना खुद का clamp() है जो दोनों के बीच सहजता से बदलता है।
| टोकन | आउटपुट |
|---|---|
| --space-3xs | clamp(0.0988rem, 0.0601rem + 0.1718vw, 0.1975rem) |
| --space-2xs | clamp(0.1481rem, 0.0902rem + 0.2576vw, 0.2963rem) |
| --space-xs | clamp(0.2222rem, 0.1353rem + 0.3865vw, 0.4444rem) |
| --space-sm | clamp(0.3333rem, 0.2029rem + 0.5797vw, 0.6667rem) |
| --space-md | clamp(0.5rem, 0.3043rem + 0.8696vw, 1rem) |
| --space-lg | clamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem) |
| --space-xl | clamp(1.125rem, 0.6848rem + 1.9565vw, 2.25rem) |
| --space-2xl | clamp(1.6875rem, 1.0272rem + 2.9348vw, 3.375rem) |
| --space-3xl | clamp(2.5313rem, 1.5408rem + 4.4022vw, 5.0625rem) |
:root {
--space-3xs: clamp(0.0988rem, 0.0601rem + 0.1718vw, 0.1975rem);
--space-2xs: clamp(0.1481rem, 0.0902rem + 0.2576vw, 0.2963rem);
--space-xs: clamp(0.2222rem, 0.1353rem + 0.3865vw, 0.4444rem);
--space-sm: clamp(0.3333rem, 0.2029rem + 0.5797vw, 0.6667rem);
--space-md: clamp(0.5rem, 0.3043rem + 0.8696vw, 1rem);
--space-lg: clamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem);
--space-xl: clamp(1.125rem, 0.6848rem + 1.9565vw, 2.25rem);
--space-2xl: clamp(1.6875rem, 1.0272rem + 2.9348vw, 3.375rem);
--space-3xl: clamp(2.5313rem, 1.5408rem + 4.4022vw, 5.0625rem);
}हर टोकन अपना खुद का clamp() है, इसलिए हर चरण दोनों व्यूपोर्ट चौड़ाइयों के बीच सहजता से बदलता है।
इस पेज पर सब कुछ आपके ब्राउज़र में संसाधित होता है। कुछ भी अपलोड नहीं होता।
यह टूल क्या करता है
एक अकेला फ्लुइड clamp() एक मान के लिए उपयोगी है, लेकिन ज़्यादातर लेआउट को स्पेसिंग के एक जैसे सुसंगत चरणों का पूरा स्केल चाहिए, और हर एक के लिए हाथ से clamp() लिखने पर वही अंकगणितीय गलती हर टोकन में दोहराई जा सकती है। यह टूल आपकी व्यूपोर्ट रेंज के हर सिरे पर एक आधार आकार और एक अनुपात लेता है, फिर उसी तरह जैसे टाइप स्केल बनाया जाता है, एक मध्य चरण के इर्द-गिर्द टोकन का सममित स्केल बनाता है, ताकि व्यूपोर्ट बदलने पर भी पूरा सेट आनुपातिक रूप से सुसंगत बना रहे।
इस्तेमाल कैसे करें
- अपनी संकरी और चौड़ी व्यूपोर्ट चौड़ाइयों पर आधार स्पेसिंग आकार सेट करें।
- चरणों के बीच स्केल अनुपात सेट करें।
- बना --space-* कस्टम प्रॉपर्टी का :root ब्लॉक कॉपी करें।
निजता
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी अपलोड, सेव या साझा नहीं होता — टैब बंद करते ही वह हट जाता है।
अक्सर पूछे जाने वाले सवाल
- नौ चरण ही क्यों?
- नौ चरण मध्य मान के ऊपर और नीचे चार-चार चरण देते हैं, जो बाद में अतिरिक्त नाम गढ़े बिना कड़े इनलाइन गैप से लेकर बड़े सेक्शन स्पेसिंग तक ज़्यादातर लेआउट को कवर कर लेते हैं।
- क्या कुछ सर्वर पर भेजा जाता है?
- नहीं। हर clamp() आपके टाइप किए अंकों से पेज में ही निकाला जाता है, इसीलिए तालिका और CSS आउटपुट तुरंत अपडेट होते हैं।
- क्या मैं इन्हें CSS clamp जेनरेटर के साथ भी इस्तेमाल कर सकता हूँ?
- हाँ। यह टूल इनपुट के एक सेट से पूरा स्केल बनाता है; CSS clamp जेनरेटर उसी अंतर्निहित गणित का इस्तेमाल करते हुए हेडिंग आकार जैसे किसी एक अकेले मान के लिए है।