CSS इकाई कनवर्टर

इकाइयों के दो परिवार

हर CSS लंबाई दो परिवारों में से किसी एक से ताल्लुक रखती है। निरपेक्ष इकाइयाँ, जैसे px, pt, cm, mm और in, एक तय भौतिक या डिवाइस आकार का वर्णन करती हैं जो संदर्भ के साथ नहीं बदलता। सापेक्ष इकाइयाँ, जैसे em, rem, प्रतिशत, vw, vh, ch और ex, किसी आकार का वर्णन किसी और चीज़ के संदर्भ में करती हैं, आमतौर पर किसी फ़ॉन्ट आकार या व्यूपोर्ट के। रेस्पॉन्सिव, सुगम्य CSS की पूरी कला इस बात पर टिकी है कि हर काम के लिए सही परिवार चुना जाए, और यह कन्वर्टर इन्हीं के बीच साफ़-सुथरा अनुवाद करने के लिए मौजूद है।

विभाजन-रेखा इसलिए मायने रखती है क्योंकि निरपेक्ष इकाइयाँ किसी मान को जमा देती हैं जबकि सापेक्ष इकाइयाँ उसे ढलने देती हैं। पिक्सेल में रखा गया कोई शीर्षक उसी आकार का बना रहता है चाहे उपयोगकर्ता ने अपना ब्राउज़र कैसे भी कॉन्फ़िगर किया हो, जबकि rem में रखा वही शीर्षक तब बड़ा हो जाता है जब वे अपना डिफ़ॉल्ट टेक्स्ट आकार बढ़ाते हैं। इनमें से एक व्यवहार मैत्रीपूर्ण है; दूसरा चुपचाप लोगों को बाहर कर देता है।

पिक्सेल और 16px की आधार-रेखा

px लगभग हर रूपांतरण के लिए संदर्भ बिंदु है। नाम के बावजूद, एक CSS पिक्सेल हमेशा एक भौतिक स्क्रीन बिंदु नहीं होता; ज़्यादा घनत्व वाले डिस्प्ले पर ब्राउज़र उसे कई डिवाइस बिंदुओं पर मैप कर देता है ताकि 16px का कोई शब्द पढ़ने के लिए सुविधाजनक आकार का बना रहे, यही वजह है कि हार्डवेयर बदलने के बावजूद px निरपेक्ष गिना जाता है। इस टूल के अधिकांश रूपांतरण एक संख्या पर टँगे होते हैं, रूट फ़ॉन्ट आकार, जो डिफ़ॉल्ट रूप से 16px होता है क्योंकि यही वह आकार है जो ब्राउज़र बिना किसी सेटिंग के html एलिमेंट पर लगाते हैं। Advanced Settings में उस आधार को बदलें और हर rem व em नतीजा उसके सापेक्ष फिर से गणना हो जाता है।

em बनाम rem: कैस्केड का अंतर

यही वह भेद है जो सबसे ज़्यादा डेवलपरों को उलझा देता है। एक rem हमेशा रूट फ़ॉन्ट आकार के सापेक्ष होता है, इसलिए 1.5rem दस्तावेज़ में कहीं भी एक ही लंबाई है, अनुमेय और सपाट। एक em उस एलिमेंट के फ़ॉन्ट आकार के सापेक्ष होता है जिस पर वह बैठा है, जिसका मतलब है कि em चक्रवृद्धि की तरह जुड़ते जाते हैं। अगर कोई सूची-आइटम 1.2em पर सेट है और उसका पैरेंट भी 1.2em है, तो बच्चा परदादा का 1.2 गुना 1.2 हो जाता है, और नेस्टिंग चुपचाप आपके टेक्स्ट को चौंकाने वाले आकारों तक फुला सकती है।

वह चक्रवृद्धि कभी-कभी वही होती है जो आप चाहते हैं। em में व्यक्त पैडिंग या मार्जिन एलिमेंट के अपने टेक्स्ट के साथ स्केल होता है, इसलिए किसी बटन की पैडिंग उसके लेबल के बढ़ने पर अनुपात में बनी रहती है। पर वैश्विक टाइप स्केल के लिए, rem आमतौर पर ज़्यादा सुरक्षित डिफ़ॉल्ट होता है ठीक इसलिए क्योंकि वह चक्रवृद्धि नहीं करता। यह कन्वर्टर आपको रूट फ़ॉन्ट आकार और पैरेंट फ़ॉन्ट आकार को अलग-अलग सेट करने देता है ताकि rem नतीजा और em नतीजा उस ठीक-ठीक अंतर को दर्शाएँ।

तरल लेआउट के लिए व्यूपोर्ट इकाइयाँ

व्यूपोर्ट इकाइयाँ खिड़की के अपने आकार के सापेक्ष मापती हैं। 1vw व्यूपोर्ट चौड़ाई का एक प्रतिशत है और 1vh उसकी ऊँचाई का एक प्रतिशत है, इसलिए 50vw फ़ॉन्ट सेटिंग की परवाह किए बिना हमेशा खिड़की का आधा चौड़ा होता है। ये तरल लेआउट और बड़े डिस्प्ले शीर्षकों की रीढ़ हैं जिन्हें टेक्स्ट आकार की बजाय स्क्रीन के साथ स्केल होना चाहिए।

हालाँकि इन्हें सावधानी से इस्तेमाल करें। बॉडी टेक्स्ट को विशुद्ध रूप से vw में आकार देने का मतलब है कि टेक्स्ट किसी सँकरे फ़ोन पर पढ़ने लायक न रहकर सिकुड़ जाता है और किसी चौड़े मॉनिटर पर फूल जाता है, और कुछ व्यवस्थाओं में यह उपयोगकर्ता के ज़ूम को अनदेखा भी कर सकता है। आधुनिक उपाय clamp फ़ंक्शन है, जो एक न्यूनतम, एक पसंदीदा तरल मान, और एक अधिकतम लेता है, जिससे कोई शीर्षक व्यूपोर्ट के साथ बढ़ सके पर कभी किसी फ़र्श से नीचे न गिरे और न ही किसी छत से ऊपर जाए। अपने फ़र्श और छत को यहाँ rem में बदलें ताकि वे फिर भी उपयोगकर्ता की फ़ॉन्ट सेटिंग का सम्मान करें।

प्रतिशत, ch और ex

प्रतिशत सापेक्ष होता है, पर किसके सापेक्ष यह प्रॉपर्टी पर निर्भर करता है। चौड़ाई के लिए यह कंटेनिंग ब्लॉक की चौड़ाई का प्रतिशत है; font-size के लिए यह पैरेंट के फ़ॉन्ट आकार का प्रतिशत है, जिससे यह टाइप के लिए काफ़ी हद तक em जैसा व्यवहार करता है। यही संदर्भ-संवेदनशीलता वजह है कि जब आप फ़ॉन्ट आकार के प्रतिशत बदलते हैं तो यह टूल एक पैरेंट फ़ॉन्ट आकार माँगता है। दो और फ़ॉन्ट-सापेक्ष इकाइयों को अनदेखा करना आसान है: ch मौजूदा फ़ॉन्ट में अंक शून्य की चौड़ाई है, जो किसी पैराग्राफ़ को लगभग 60ch के सुविधाजनक पठन-माप पर सीमित करने के लिए उत्तम है, जबकि ex छोटे अक्षर x की ऊँचाई है, जो टाइपफ़ेस के अनुपातों से जुड़े ऊर्ध्वाधर समायोजनों के लिए उपयोगी है।

निरपेक्ष प्रिंट इकाइयाँ: pt, in, cm, mm

भौतिक इकाइयाँ CSS स्पेक में तय अनुपातों से नियंत्रित होती हैं, यही वजह है कि यहाँ के रूपांतरण अनुमान नहीं हैं। एक इंच 96px के बराबर है, एक पॉइंट एक इंच का बहत्तरवाँ भाग है इसलिए वह एक और एक-तिहाई पिक्सेल बनता है, एक सेंटीमीटर लगभग 37.8px है, और एक मिलीमीटर उसका दसवाँ हिस्सा है। ये अनुपात असली डिस्प्ले की परवाह किए बिना तय हैं।

स्क्रीन पर ये इकाइयाँ ज़्यादातर एक जाल हैं, क्योंकि पेज पर एक सेंटीमीटर मॉनिटर से सटाकर रखी रूलर के एक सेंटीमीटर से शायद ही मेल खाता है। इनका असली घर प्रिंट स्टाइलशीट हैं, जहाँ कागज़ की एक भौतिक शीट इन्हें वास्तविक अर्थ देती है, और pt ख़ासकर अब भी वह पारंपरिक तरीका बना हुआ है जिससे डिज़ाइनर और वर्ड प्रोसेसर टाइप आकारों का वर्णन करते हैं। pt, cm और mm की ओर तब हाथ बढ़ाएँ जब आप प्रिंट के लिए स्टाइल कर रहे हों, और rem, em व व्यूपोर्ट इकाइयों की ओर तब जब आप स्क्रीन के लिए स्टाइल कर रहे हों।

सुगम्यता: px फ़ॉन्ट क्यों एक समस्या हैं

जब आप फ़ॉन्ट आकार px में सेट करते हैं, तो आप उन्हें पिन कर देते हैं। जो उपयोगकर्ता अपने ब्राउज़र का डिफ़ॉल्ट टेक्स्ट आकार बढ़ाता है, अक्सर इसलिए क्योंकि उसे ज़रूरत होती है, उसे कोई बदलाव नहीं दिखता, क्योंकि एक तय पिक्सेल मान उस पसंद को पूरी तरह अनदेखा कर देता है। इसकी बजाय टेक्स्ट को rem में आकार देने का मतलब है कि वह उपयोगकर्ता द्वारा चुने गए रूट फ़ॉन्ट आकार के साथ स्केल होता है, जो CSS में उपलब्ध सबसे ज़्यादा असर वाली सुगम्यता जीतों में से एक है और डिफ़ॉल्ट पाठक के लिए दृश्य रूप से आपको कुछ भी नहीं पड़ता।

इससे एक व्यावहारिक वर्कफ़्लो निकलता है: पिक्सेल में डिज़ाइन करें क्योंकि वे सहज हैं, फिर शिप करने से पहले अपने टाइप और स्पेसिंग को rem में बदल लें ताकि लेआउट उपयोगकर्ता सेटिंग का सम्मान करे। यही वह सबसे आम रूपांतरण है जो यह टूल करता है, और डिफ़ॉल्ट 16px आधार पर गणित मैत्रीपूर्ण है, क्योंकि 16px 1rem है, 24px 1.5rem है, और 8px 0.5rem है।