सभी tools निःशुल्क

हर CSS इकाई ब्राउज़ करें — निरपेक्ष (px, cm, pt), फ़ॉन्ट-सापेक्ष (em, rem, ch), व्यूपोर्ट (vw, dvh), container-query, ग्रिड (fr), कोण, समय और रिज़ॉल्यूशन — एक खोजने योग्य, प्रकार-फ़िल्टर करने योग्य संदर्भ में एक विवरण, एक "कब उपयोग करें" टिप्पणी और कॉपी-रेडी टोकन के साथ। आपके ब्राउज़र में, मुफ़्त।

हर CSS इकाई, समझाई गई। सब कुछ एक अंतर्निहित संदर्भ से आपके ब्राउज़र में चलता है — सर्वर पर कुछ भी नहीं भेजा जाता।

कोई इकाई आपकी खोज से मेल नहीं खाती।
कोई अलग इकाई या श्रेणी आज़माएँ — जैसे rem, dvh, fr या angle।

CSS Units Reference के बारे में

CSS Units रेफरेंस भाषा द्वारा दी जाने वाली हर यूनिट को दस्तावेज़ करता है — कुल मिलाकर 45 — जिन्हें टाइप के अनुसार व्यवस्थित किया गया है: px, cm और pt जैसी एब्सोल्यूट यूनिट; em, rem, ch और lh जैसी फॉन्ट-रिलेटिव यूनिट; vw और vh से लेकर नई svh, lvh और dvh तक व्यूपोर्ट यूनिट; cqw और cqi जैसी कंटेनर-क्वेरी यूनिट; ग्रिड fr यूनिट; साथ ही एंगल, टाइम, रिज़ॉल्यूशन और परसेंटेज।

हर कार्ड एक परिभाषा से कहीं ज्यादा देता है: कॉपी करने योग्य मोनोस्पेस में यूनिट टोकन, उसका पूरा नाम, उसकी श्रेणी, यह कैसे गणना की जाती है इसका सादा भाषा में विवरण, और एक व्यावहारिक "कब इस्तेमाल करें" नोट जो बताता है कि यूनिट कहाँ अपनी जगह बनाती है — और कहाँ कोई दूसरी यूनिट बेहतर काम करती है।

सर्च टोकन, नामों और अर्थों से मेल खाता है, इसलिए rem, viewport width और root सभी अपनी यूनिट ढूंढ लेते हैं, और टाइप चिप्स ग्रिड को एक परिवार तक फिल्टर करते हैं। सब कुछ आपके ब्राउज़र में एक बिल्ट-इन रेफरेंस से चलता है, कुछ भी सर्वर को भेजे बिना।

CSS Units Reference का उपयोग कैसे करें

  1. टोकन, नाम या अर्थ से एक यूनिट खोजें — उदाहरण के लिए rem, viewport width या angle।
  2. ग्रिड को एब्सोल्यूट, फॉन्ट-रिलेटिव, व्यूपोर्ट, कंटेनर, ग्रिड, एंगल, टाइम, रिज़ॉल्यूशन या परसेंटेज यूनिट तक फिल्टर करने के लिए टाइप चिप्स इस्तेमाल करें।
  3. सही यूनिट चुनने के लिए हर यूनिट का विवरण और उसका "कब इस्तेमाल करें" नोट पढ़ें।
  4. अपनी स्टाइलशीट के लिए यूनिट टोकन पाने के लिए कॉपी बटन दबाएँ।

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

फॉन्ट साइज़ और उन सभी चीज़ों के लिए rem इस्तेमाल करें जिन्हें यूज़र की पसंदीदा टेक्स्ट साइज़ के साथ स्केल होना चाहिए — rem रूट फॉन्ट साइज़ को ट्रैक करता है, इसलिए ब्राउज़र एक्सेसिबिलिटी सेटिंग्स काम करती हैं। ऐसी चीज़ों के लिए px इस्तेमाल करें जिन्हें ऑप्टिकल रूप से स्थिर रहना चाहिए, जैसे हेयरलाइन बॉर्डर।

em वर्तमान एलिमेंट के अपने फॉन्ट साइज़ के सापेक्ष होता है, इसलिए नेस्टेड एलिमेंट वैल्यू को जोड़ते जाते हैं; rem हमेशा रूट एलिमेंट के सापेक्ष होता है, जो अनुमानित परिणाम देता है। इसीलिए स्पेसिंग और टाइप स्केल के लिए rem डिफॉल्ट पसंद बन गया है।

मोबाइल ब्राउज़र अपने टूलबार दिखाते और छुपाते हैं, जिससे दिखने वाली ऊँचाई बदलती है, जबकि vh बड़े लेआउट साइज़ पर स्थिर रहता है। डायनामिक यूनिट dvh टूलबार हिलने पर वास्तविक दिखने वाली ऊँचाई को ट्रैक करती है, और svh/lvh सबसे छोटी और सबसे बड़ी स्थिति पर टिकी रहती हैं।

fr एक ग्रिड कंटेनर की खाली जगह को अनुपात के हिसाब से बाँटती है: grid-template-columns: 2fr 1fr पहले कॉलम को दूसरे की बची हुई चौड़ाई से दोगुना देता है, फिक्स्ड ट्रैक्स और गैप घटाने के बाद। यह केवल ग्रिड ट्रैक परिभाषाओं के अंदर मौजूद होती है।

ये एलिमेंट्स को व्यूपोर्ट की बजाय उनके निकटतम क्वेरी कंटेनर के सापेक्ष आकार देती हैं: cqw कंटेनर की चौड़ाई का 1% है, cqi उसके इनलाइन साइज़ का 1%। ये किसी कंपोनेंट को स्क्रीन साइज़ से स्वतंत्र, उस बॉक्स के अनुसार स्केल करने देती हैं जिसमें वह रहता है।

हाँ। सभी 45 यूनिट एक ऐसे पेज में मुफ्त दस्तावेज़ीकृत हैं जो पूरी तरह आपके ब्राउज़र में चलता है — कोई साइन-अप नहीं, सर्वर को कोई रिक्वेस्ट नहीं।

इसे साझा करें
मदद चाहिए?
इस टूल में कोई समस्या मिली? हमारी टीम को बताएं।
समस्या की रिपोर्ट करें

इस मुफ़्त टूल को अपनी वेबसाइट पर जोड़ें — नीचे दिया गया कोड कॉपी और पेस्ट करें।