PX से REM कैलकुलेटर क्या है?
PX से REM कैलकुलेटर एक ऐसा टूल है जो पिक्सेल (px) वैल्यू को REM यूनिट में बदल देता है। CSS में REM यूनिट रूट एलिमेंट के फ़ॉन्ट साइज़ के सापेक्ष होती है। यह रूपांतरण ऐसे रिस्पॉन्सिव और सुलभ (accessible) वेब डिज़ाइन बनाने के लिए ज़रूरी है, जो अलग-अलग स्क्रीन साइज़ और यूज़र की पसंद के अनुसार सही ढंग से स्केल हो सकें।
PX से REM कैलकुलेटर का उपयोग कब करें
आपको PX से REM कैलकुलेटर का इस्तेमाल इन स्थितियों में करना चाहिए:
- जब आप ऐसी रिस्पॉन्सिव वेबसाइट बना रहे हों जिसे अलग-अलग डिवाइस पर समान अनुपात में स्केल होना चाहिए
- जब आप ऐसे सुलभ डिज़ाइन बनाना चाहते हों जो यूज़र की फ़ॉन्ट साइज़ संबंधी पसंद का सम्मान करें
- जब आप किसी मौजूदा डिज़ाइन को बेहतर रख-रखाव (maintainability) के लिए एब्सोल्यूट यूनिट (पिक्सेल) से रिलेटिव यूनिट (REM) में बदल रहे हों
PX को REM में कैसे बदलें
पिक्सेल को REM में बदलने का फ़ॉर्मूला है:
rem = px ÷ रूट फ़ॉन्ट साइज़
जहाँ:
- rem वह नतीजा है जो REM यूनिट में मिलता है
- px वह पिक्सेल वैल्यू है जिसे आप बदलना चाहते हैं
- रूट फ़ॉन्ट साइज़ रूट एलिमेंट का बेस फ़ॉन्ट साइज़ है (ज़्यादातर ब्राउज़र में आमतौर पर 16px)
उदाहरण
उदाहरण 1: हेडिंग साइज़ को पिक्सेल से REM में बदलना
24px के हेडिंग साइज़ को डिफ़ॉल्ट रूट फ़ॉन्ट साइज़ 16px के साथ REM में बदलें।
| इनपुट | गणना | नतीजा |
|---|---|---|
| पिक्सेल वैल्यू: 24px रूट फ़ॉन्ट साइज़: 16px |
24 ÷ 16 | 1.5rem |
उदाहरण 2: कस्टम रूट फ़ॉन्ट साइज़ के साथ मार्जिन वैल्यू बदलना
40px के मार्जिन को 20px के कस्टम रूट फ़ॉन्ट साइज़ के साथ REM में बदलें।
| इनपुट | गणना | नतीजा |
|---|---|---|
| पिक्सेल वैल्यू: 40px रूट फ़ॉन्ट साइज़: 20px |
40 ÷ 20 | 2rem |
उदाहरण 3: छोटी पैडिंग वैल्यू बदलना
8px की पैडिंग को डिफ़ॉल्ट रूट फ़ॉन्ट साइज़ 16px के साथ REM में बदलें।
| इनपुट | गणना | नतीजा |
|---|---|---|
| पिक्सेल वैल्यू: 8px रूट फ़ॉन्ट साइज़: 16px |
8 ÷ 16 | 0.5rem |
आम पिक्सेल से REM रूपांतरण
नीचे आमतौर पर इस्तेमाल होने वाली पिक्सेल वैल्यू का REM में रूपांतरण देने वाली एक रेफ़रेंस टेबल दी गई है (मानक 16px रूट फ़ॉन्ट साइज़ के आधार पर):
| पिक्सेल | REM |
|---|---|
| 4 px | 0.25 rem |
| 8 px | 0.5 rem |
| 12 px | 0.75 rem |
| 14 px | 0.88 rem |
| 15 px | 0.94 rem |
| 16 px | 1 rem |
| 18 px | 1.12 rem |
| 20 px | 1.25 rem |
| 24 px | 1.5 rem |
| 25 px | 1.56 rem |
| 32 px | 2 rem |
| 40 px | 2.5 rem |
| 48 px | 3 rem |
| 56 px | 3.5 rem |
| 64 px | 4 rem |
| 80 px | 5 rem |
| 300 px | 18.75 rem |
पिक्सेल की तुलना में REM इस्तेमाल करने के फ़ायदे
अपने CSS में REM यूनिट का उपयोग करने के कई फ़ायदे हैं:
- बेहतर सुलभता, क्योंकि REM यूनिट यूज़र की ब्राउज़र फ़ॉन्ट साइज़ सेटिंग के साथ स्केल होती है
- आसान रिस्पॉन्सिवनेस, सिर्फ़ मीडिया क्वेरी में रूट फ़ॉन्ट साइज़ बदलकर
- सभी एलिमेंट में ज़्यादा एक समान स्केलिंग
- एलिमेंट के बीच आनुपातिक संबंध से बेहतर रख-रखाव
संबंधित कैलकुलेटर
ये संबंधित कैलकुलेटर भी आपके काम आ सकते हैं:
