इस लेख में
CSS यूनिट क्या हैं?
CSS यूनिट किसी वेब पेज पर एलिमेंट का आकार तय करती हैं। ये दो श्रेणियों में आती हैं: absolute यूनिट (px, cm, mm, in, pt, pc) जिनका भौतिक आकार निश्चित होता है, और relative यूनिट (rem, em, vw, vh, vmin, vmax, %) जो font size या viewport के आयाम जैसे संदर्भ के आधार पर घटती-बढ़ती हैं।
आधुनिक रिस्पॉन्सिव डिज़ाइन काफ़ी हद तक relative यूनिट पर निर्भर करता है। rem यूनिट रूट font size (आमतौर पर 16px) के अनुसार घटती-बढ़ती है, em पैरेंट एलिमेंट के font size के अनुसार, और viewport यूनिट (vw, vh) ब्राउज़र विंडो के अनुसार बदलती हैं, जिससे लेआउट हर डिवाइस पर तरल बना रहता है।
CSS यूनिट रूपांतरण कैसे काम करता है
CSS यूनिट के बीच रूपांतरण के लिए आधार संदर्भ जानना ज़रूरी है: rem के लिए रूट font size, em के लिए पैरेंट font size, और vw/vh के लिए viewport के आयाम। ज़्यादातर रूपांतरण सरल गुणा या भाग से हो जाते हैं।
- px से rem — पिक्सेल मान को रूट font size (डिफ़ॉल्ट 16px) से भाग दें, इसलिए रूट 16px होने पर 24px = 1.5rem होता है
- rem से em — जब एलिमेंट रूट font size को इनहेरिट करता है तब rem और em बराबर होते हैं; अन्यथा पैरेंट और रूट font size के अनुपात से गुणा करें
- px से vw/vh — पिक्सेल मान को viewport की चौड़ाई (या ऊँचाई) से भाग दें और 100 से गुणा करें, इसलिए 1920px चौड़े viewport पर 192px = 10vw होता है
निःशुल्क आज़माएँ — कोई साइनअप आवश्यक नहीं
CSS यूनिट बदलें →CSS यूनिट रूपांतरण का उपयोग कब करें
CSS यूनिट के बीच रूपांतरण आधुनिक फ्रंट-एंड डेवलपमेंट का रोज़मर्रा का काम है।
- रिस्पॉन्सिव डिज़ाइन — निश्चित पिक्सेल वाले मॉकअप को rem या vw-आधारित लेआउट में बदलें जो मोबाइल से डेस्कटॉप तक हर स्क्रीन आकार पर सहजता से घटते-बढ़ते हैं
- एक्सेसिबिलिटी — rem यूनिट का उपयोग यह सुनिश्चित करता है कि जब उपयोगकर्ता अपने ब्राउज़र का डिफ़ॉल्ट font size बदलें तो टेक्स्ट सही तरह से घटे-बढ़े, जो एक अहम एक्सेसिबिलिटी आवश्यकता है
- डिज़ाइन सिस्टम टोकन — डिज़ाइनर के विनिर्देशों (आमतौर पर पिक्सेल में) को rem-आधारित टोकन में बदलें जो एक समान स्पेसिंग और टाइपोग्राफी अनुपात बनाए रखते हैं
अक्सर पूछे जाने वाले प्रश्न
font size के लिए मुझे rem का उपयोग करना चाहिए या em का?
ज़्यादातर मामलों में rem का उपयोग करें। rem यूनिट रूट font size के सापेक्ष होती हैं, जिससे ये नेस्टिंग की गहराई से बेपरवाह होकर पूर्वानुमेय बनी रहती हैं। em यूनिट नेस्ट होने पर चक्रवृद्धि होती जाती हैं (एक 1.2em के भीतर दूसरा 1.2em मिलकर 1.44x बन जाता है), जिससे अप्रत्याशित आकार आ सकता है। em को उन्हीं ख़ास कंपोनेंट के लिए रखें जहाँ पैरेंट के सापेक्ष घटना-बढ़ना जानबूझकर चाहिए।
ब्राउज़र में डिफ़ॉल्ट रूट font size क्या होता है?
सभी प्रमुख ब्राउज़र रूट font size के रूप में डिफ़ॉल्ट 16px रखते हैं। इसका मतलब है कि जब तक CSS द्वारा बदला न जाए, 1rem = 16px होता है। उपयोगकर्ता एक्सेसिबिलिटी के लिए इसे ब्राउज़र सेटिंग में बदल सकते हैं, यही कारण है कि font size और स्पेसिंग के लिए px के बजाय rem का उपयोग सुलभ डिज़ाइन के लिए महत्वपूर्ण है।
rem के बजाय viewport यूनिट का उपयोग कब करना चाहिए?
उन एलिमेंट के लिए viewport यूनिट (vw, vh) का उपयोग करें जिन्हें font size के बजाय ब्राउज़र विंडो के साथ घटना-बढ़ना चाहिए। आम उदाहरणों में पूरी स्क्रीन वाले हीरो सेक्शन (height: 100vh), तरल टाइपोग्राफी (vw के साथ clamp), और कंटेनर पर रिस्पॉन्सिव पैडिंग शामिल हैं। बॉडी टेक्स्ट के लिए vw से बचें — यह उपयोगकर्ता की font प्राथमिकताओं को नज़रअंदाज़ कर देता है।