इस्तेमाल करने का तरीका
- अगर आपकी साइट मूल फ़ॉन्ट आकार बदलती है, तो उसे यहाँ सेट करें (उदाहरण के लिए, html { font-size: 62.5% } से यह 10px हो जाता है)।
- px को rem में या rem को px में बदलने के लिए किसी भी बॉक्स में मान लिखें। अगर आपको पैरेंट के अनुपात में आकार देना है, तो em चुनें।
- जल्दी से मान देखने के लिए तालिका इस्तेमाल करें, या एक साथ सभी px लंबाइयाँ बदलने के लिए CSS स्निपेट पेस्ट करें और नतीजा कॉपी करें।
यह कैसे काम करता है
rem = px ÷ मूल फ़ॉन्ट आकार। डिफ़ॉल्ट 16px मूल आकार के साथ, 24px = 1.5rem और 14px = 0.875rem होता है। em में भी यही फ़ॉर्मूला इस्तेमाल होता है, लेकिन इसमें पैरेंट एलिमेंट का फ़ॉन्ट आकार लिया जाता है। इसी वजह से, नेस्टेड em मान एक-दूसरे से गुणा होते जाते हैं। rem में ऐसा नहीं होता, क्योंकि यह हमेशा मूल आकार पर निर्भर करता है।
फ़ॉन्ट आकार और स्पेसिंग के लिए rem इस्तेमाल करने से, ब्राउज़र सेटिंग में डिफ़ॉल्ट फ़ॉन्ट आकार बढ़ाने पर टेक्स्ट भी बड़ा हो जाता है। इससे कम दृष्टि वाले लोगों को मदद मिलती है। मानों को चार दशमलव स्थानों तक राउंड किया जाता है।
स्निपेट कन्वर्टर उन संख्याओं को बदलता है जिनके बाद px आता है। यह टिप्पणियों, url(…) और उद्धरण-चिह्नों में लिखी स्ट्रिंग को जस का तस छोड़ता है। अगर आप चाहें तो यह 1px को भी बरकरार रखता है (पतले बॉर्डर आम तौर पर 1px ही रहने चाहिए), 0px को 0 लिखता है और डिफ़ॉल्ट रूप से @media और @container की शर्तों को नहीं बदलता। ऐसा इसलिए, क्योंकि मीडिया क्वेरी में rem और em हमेशा ब्राउज़र के शुरुआती फ़ॉन्ट आकार को संदर्भित करते हैं, चाहे आपने मूल फ़ॉन्ट आकार कुछ भी सेट किया हो। यह calc() के अर्थ को पूरी तरह नहीं समझता, लेकिन उसके अंदर मौजूद px संख्याओं को बदलना सही रहता है, क्योंकि हर लंबाई को अलग-अलग कन्वर्ट किया जाता है।
उदाहरण
डिफ़ॉल्ट मूल आकार
16px मूल आकार के साथ: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px।
62.5% वाली तरकीब
अगर आपके CSS में html { font-size: 62.5% } सेट है, तो मूल आकार 10px होगा। इसलिए 14px = 1.4rem और 24px = 2.4rem। इससे मेल खाने के लिए मूल फ़ॉन्ट आकार फ़ील्ड में 10 सेट करें।
कंपोनेंट कन्वर्ट करना
“1px मान बनाए रखें” चालू होने पर padding: 24px 16px; border: 1px solid #ddd; बदलकर padding: 1.5rem 1rem; border: 1px solid #ddd; हो जाता है।
अक्सर पूछे जाने वाले सवाल
मुझे rem इस्तेमाल करना चाहिए या em?
ज़्यादातर फ़ॉन्ट आकार, स्पेसिंग और लेआउट के लिए rem इस्तेमाल करें, क्योंकि यह हर जगह अनुमान के मुताबिक काम करता है। em तब इस्तेमाल करें, जब किसी चीज़ का आकार उसी कंपोनेंट के टेक्स्ट आकार के अनुपात में बदलना हो—जैसे बटन के अंदर की पैडिंग।
मीडिया क्वेरी को rem में क्यों नहीं बदलना चाहिए?
कर सकते हैं, लेकिन मीडिया क्वेरी में 1rem हमेशा ब्राउज़र के डिफ़ॉल्ट फ़ॉन्ट आकार (आमतौर पर 16px) के बराबर होता है, आपके html फ़ॉन्ट आकार के नहीं। इसलिए कन्वर्टर डिफ़ॉल्ट रूप से इन्हें छोड़ देता है। अगर आप फिर भी 16 से भाग देते हैं, तो यह विकल्प बंद कर दें।
क्या सुलभता के लिए px से rem बेहतर है?
फ़ॉन्ट आकारों के लिए, हाँ: rem उपयोगकर्ता की डिफ़ॉल्ट फ़ॉन्ट आकार सेटिंग का ध्यान रखता है, जबकि px में फ़ॉन्ट आकार ऐसा नहीं करता। ब्राउज़र ज़ूम दोनों यूनिट के साथ काम करता है।
गोपनीयता
कन्वर्ज़न और CSS स्निपेट आपके ब्राउज़र में प्रोसेस किए जाते हैं और कहीं भी नहीं भेजे जाते।