CSS यूनिट कन्वर्टर
CSS में दर्जनभर अलग-अलग लंबाई यूनिट्स होती हैं - px, pt, in, cm जैसी absolute यूनिट्स,
em और rem जैसी font-relative यूनिट्स, और vw तथा vh जैसी viewport-relative यूनिट्स। इन्हें
आपस में मिला देना स्टाइलशीट में असंगत स्पेसिंग की सबसे आम वजहों में से एक है। यह टूल किसी भी दो CSS
यूनिट्स के बीच एक मान को बदलता है और आपके दिए गए base font size और viewport dimensions का उपयोग
करते हुए वही मान सभी समर्थित यूनिट्स में एक साथ दिखाता है।
Absolute यूनिट्स
Absolute यूनिट्स font size या स्क्रीन से स्वतंत्र, एक-दूसरे के सापेक्ष स्थिर होती हैं। ये सभी उसी संदर्भ (प्रति इंच 96px) के माध्यम से पिक्सेल में बदलती हैं जिसका उपयोग ब्राउज़र करते हैं:
Font-relative यूनिट्स
rem हमेशा root (<html>) एलिमेंट के font size के सापेक्ष होता है, जबकि em वर्तमान एलिमेंट के
font size के सापेक्ष होता है। यह टूल एक ही base font size मांगता है और इसे दोनों के लिए उपयोग
करता है, जो तब सटीक रहता है जब आप जिस एलिमेंट को स्टाइल कर रहे हैं उसका अपना अलग font-size override
न हो:
Viewport-relative यूनिट्स
vw और vh, ब्राउज़र के viewport की चौड़ाई और ऊंचाई के प्रतिशत होते हैं, इसलिए इन्हें बदलने के लिए
आपको जिस viewport आकार के लिए डिज़ाइन कर रहे हैं वह चाहिए:
कन्वर्जन कैसे काम करता है
हर यूनिट को पहले पिक्सेल के एक सामान्य आधार में बदला जाता है, फिर पिक्सेल से लक्ष्य यूनिट में:
इस टूल का उपयोग कैसे करें
- वह संख्यात्मक value दर्ज करें जिसे आप बदलना चाहते हैं
- वह यूनिट जिससे बदलना है और वह यूनिट जिसमें बदलना है चुनें
em/remके लिए उपयोग होने वाला base font size सेट करें (डिफ़ॉल्ट 16px है)vw/vhके लिए उपयोग होने वाली viewport width और viewport height सेट करें- सभी समर्थित यूनिट्स में बदला हुआ मान और पूरी टेबल देखने के लिए सबमिट करें
हल किया गया उदाहरण
24px को rem में बदलना, जहां base font size 16px है:
इसलिए जब root font size 16px हो, तो font-size: 24px और font-size: 1.5rem एक ही रेंडर हुआ
टेक्स्ट साइज़ देते हैं - यही वजह है कि आधुनिक, accessibility-friendly स्टाइलशीट में 1.5rem लिखना
ज़्यादा आम तरीका है।