PX से REM कन्वर्टर

यह क्या करता है

यह टूल CSS लंबाइयों को पिक्सेल और सापेक्ष यूनिट rem व em के बीच बदलता है। 24px जैसी एक वैल्यू लिखें और 1.5rem पाएँ, कई वैल्यू हर पंक्ति में एक लिखकर सब एक साथ बदलें, या पूरी स्टाइलशीट चिपकाएँ और उसकी हर px वैल्यू वहीं बदल दी जाएगी। संदर्भ टेबल आपके बेस साइज़ पर 1px से 128px तक के आम साइज़ दिखाती है। कुछ भी आपके ब्राउज़र से बाहर नहीं जाता।

कैसे इस्तेमाल करें

CSS चिपकाएँ या हर पंक्ति में एक वैल्यू लिखें। बिना यूनिट के नंबर px माने जाते हैं (दिशा उलटने पर rem/em), और दूसरी यूनिट में लिखी वैल्यू उलटी दिशा में बदली जाती है।
बेस फ़ॉन्ट साइज़ सेट करें। सभी ब्राउज़र में डिफ़ॉल्ट 16px है; कुछ प्रोजेक्ट html { font-size: 62.5% } लिखते हैं ताकि 1rem = 10px हो।
दिशा (px → rem या rem → px), यूनिट (rem या em) और कितने दशमलव अंक रखने हैं, चुनें।
ज़रूरत हो तो इससे छोटी वैल्यू px में रखें सेट करें, ताकि 1px बॉर्डर और दूसरी पतली लाइनें px में रहें।
नतीजे के ऊपर वाले बटन से कॉपी करें।

उदाहरण

/* before */
.title { font-size: 24px; margin-bottom: 12px; }

/* after (base 16px) */
.title { font-size: 1.5rem; margin-bottom: 0.75rem; }

जो वैल्यू px नहीं हैं, जैसे प्रतिशत, रंग, url() में फ़ाइल नाम और .mt-16px जैसे क्लास नाम, उन्हें नहीं छुआ जाता। 0px बन जाता है 0।

px, rem और em

px एक निरपेक्ष यूनिट है, जो पाठक के पसंदीदा फ़ॉन्ट साइज़ को अनदेखा करती है।
rem (“root em”) html एलिमेंट के फ़ॉन्ट साइज़ का गुणज है। अगर पाठक ब्राउज़र को 20px पर सेट करे, तो 1rem 20px हो जाता है और पूरा लेआउट उसी हिसाब से बढ़ता है।
em मौजूदा एलिमेंट के फ़ॉन्ट साइज़ का गुणज है। यह उन स्पेसिंग के लिए उपयोगी है जिन्हें अपने टेक्स्ट के साथ चलना चाहिए, पर नेस्टेड em गुणा होते जाते हैं, इसलिए डिफ़ॉल्ट के रूप में rem ज़्यादा सुरक्षित है।

मीडिया क्वेरी भी बदली जाती हैं: @media (min-width: 768px) बन जाता है 48rem (या 48em), जिससे पाठक के टेक्स्ट बड़ा करने पर भी ब्रेकपॉइंट एक जैसे रहते हैं। मीडिया क्वेरी में rem और em दोनों ब्राउज़र के डिफ़ॉल्ट फ़ॉन्ट साइज़ पर आधारित होते हैं, आपके html नियम पर नहीं।

अक्सर पूछे जाने वाले सवाल

› px को rem में कैसे बदलें?

पिक्सेल वैल्यू को रूट फ़ॉन्ट साइज़ से भाग दें। ब्राउज़र के डिफ़ॉल्ट 16px पर 24px ÷ 16 = 1.5rem और 12px ÷ 16 = 0.75rem होता है। वापस बदलने के लिए गुणा करें: 2rem × 16 = 32px।

› rem और em में क्या अंतर है?

rem रूट html एलिमेंट के फ़ॉन्ट साइज़ के सापेक्ष है, इसलिए पूरे पेज पर 1rem एक जैसा होता है। em मौजूदा एलिमेंट के फ़ॉन्ट साइज़ (font-size के लिए पैरेंट) के सापेक्ष है, इसलिए एलिमेंट नेस्ट होने पर गुणा होता जाता है। ज़्यादातर साइज़ के लिए rem और जहाँ चीज़ अपने टेक्स्ट के साथ बढ़नी चाहिए, जैसे बटन की पैडिंग, वहाँ em इस्तेमाल करें।

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

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

› क्या 1px बॉर्डर बदलने चाहिए?

आम तौर पर नहीं। 0.0625rem की पतली लाइन कुछ ज़ूम स्तरों पर धुंधली हो सकती है या ग़ायब हो सकती है। “इससे छोटी वैल्यू px में रखें” को 2px पर सेट करें, तो बॉर्डर और दूसरी बहुत छोटी वैल्यू px में ही रहेंगी।

विकल्प

CSS या वैल्यू

परिणाम