CSS यूनिट कन्वर्टर (px / rem / em / vh / vw)

px के बजाय rem क्यों

ब्राउज़र 16px से शुरू होते हैं, लेकिन कम दृष्टि वाले लोग अक्सर अपने ब्राउज़र की सेटिंग्स में डिफ़ॉल्ट फ़ॉन्ट आकार बढ़ाते हैं। rem में आकार दिया गया टेक्स्ट उस सेटिंग के साथ बढ़ता है; px में दिया गया टेक्स्ट नहीं बढ़ता। पेज zoom दोनों को बड़ा करता है, लेकिन font-size setting पर कई पाठक निर्भर करते हैं और WCAG का resize-text criterion अपेक्षा करता है कि टेक्स्ट बिना नुकसान के 200% तक बढ़ सके। टेक्स्ट का आकार और उसके आसपास की spacing rem में रखें, तथा hairlines और borders के लिए px रखें।

em कॉलम और नेस्टिंग

em एलिमेंट के अपने फ़ॉन्ट आकार के सापेक्ष होता है, लेकिन font-size के लिए यह parent के फ़ॉन्ट आकार के सापेक्ष होता है। यहाँ के em मान मानते हैं कि parent root size पर है, जो केवल top level पर सही होता है। 0.875em एलिमेंट के अंदर फिर से 0.875em लगाने पर 14px के बजाय 12.25px मिलता है और सिकुड़ना लगातार बढ़ता जाता है। इसी कारण rem सुरक्षित default है, जबकि em उस spacing के लिए उपयुक्त है जिसे अपने component के टेक्स्ट के साथ scale होना चाहिए।

62.5% base और viewport units

html { font-size: 62.5% } सेट करने पर 1rem बराबर 10px हो जाता है, जिससे गणना आसान होती है; मिलान के लिए base size के रूप में 10 डालें। इससे rem में आकार दी गई बाकी सभी चीज़ें, third-party components सहित, छोटी हो जाती हैं, इसलिए body पर फिर से पढ़ने योग्य आकार सेट करें।

vw और vh के आँकड़े 1440 × 900 viewport मानते हैं। फ़ोन पर browser toolbar दिखाई देने के दौरान 100vh दिखने वाले क्षेत्र से अधिक ऊँचा हो सकता है; 100svh और 100dvh वे units हैं जो इसका हिसाब रखते हैं।

इस्तेमाल करने का तरीका

1. पिक्सेल मान (px) और मूल आधार आकार (डिफ़ॉल्ट 16px) दर्ज करें।
2. गणना किए गए rem, em, vw और vh मान देखें।
3. तुरंत इस्तेमाल योग्य CSS स्निपेट कॉपी करें या स्केल तालिका देखें।

गोपनीयता और सीमाएँ

यह क्लाइंट-साइड JavaScript में तुरंत चलता है।