MCP के माध्यम से कनेक्ट करें →

गणना दर्ज करें

सूत्र (फॉर्मूला)

विज्ञापन

परिणाम

समकक्ष EM मान
1
em
पिक्सेल वैल्यू 16 px
बेस फ़ॉन्ट साइज़ 16 px
परिणाम 1 em

PX से EM कन्वर्टर क्या है?

PX से EM कन्वर्टर पिक्सेल माप को CSS में इस्तेमाल होने वाली em यूनिट में बदल देता है। पिक्सेल (px) एक निरपेक्ष (absolute) यूनिट है, जबकि em एक सापेक्ष (relative) यूनिट है जो बेस फ़ॉन्ट साइज़ के अनुसार स्केल होती है। em में डिज़ाइन करने से आपका लेआउट ज़्यादा लचीला और सुलभ बनता है, क्योंकि एलिमेंट यूज़र की फ़ॉन्ट प्राथमिकताओं के साथ खुद-ब-खुद बढ़ते-घटते हैं।

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

जिस पिक्सेल वैल्यू को बदलना है उसे दर्ज करें और बेस फ़ॉन्ट साइज़ पिक्सेल में डालें। ज़्यादातर ब्राउज़र में डिफ़ॉल्ट रूट फ़ॉन्ट साइज़ 16px होता है, इसलिए आमतौर पर बेस 16 ही रखा जाता है। समकक्ष em मान देखने के लिए कैलकुलेट पर क्लिक करें।

फ़ॉर्मूला समझें

यह कन्वर्ज़न एक सीधा भाग (division) है:

$$\text{EM} = \frac{\text{Pixel value (px)}}{\text{Base font size (px)}}$$

अगर आपका बेस फ़ॉन्ट साइज़ 16px है, तो 16px बराबर 1em होगा, 24px बराबर 1.5em और 8px बराबर 0.5em। सही बेस चुनना बहुत ज़रूरी है: em पैरेंट एलिमेंट के फ़ॉन्ट साइज़ के सापेक्ष होता है, जो रूट से अलग भी हो सकता है।

विज्ञापन
आरेख जिसमें पिक्सेल मान को आधार फ़ॉन्ट आकार से भाग देने पर em मान बराबर दिखाया गया है
em मान पिक्सेल मान को पिक्सेल में आधार फ़ॉन्ट आकार से भाग देने पर मिलता है।

हल किया हुआ उदाहरण

मान लीजिए आप 24px को 16px बेस फ़ॉन्ट साइज़ के साथ बदलना चाहते हैं। फ़ॉर्मूला लगाएँ: $$24 \div 16 = 1.5\,\text{em}$$ यानी 24px का हेडिंग 1.5em बन जाता है।

16 पिक्सेल आधार के साथ 24 पिक्सेल को 1.5 em में बदलने का उदाहरण
उदाहरण: 16px आधार के साथ 24px बराबर 1.5em होता है।

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

मुझे कौन-सा बेस फ़ॉन्ट साइज़ इस्तेमाल करना चाहिए? उस एलिमेंट के पैरेंट का फ़ॉन्ट साइज़ इस्तेमाल करें। रूट-स्तर के कन्वर्ज़न के लिए आमतौर पर ब्राउज़र का डिफ़ॉल्ट 16px ही सही रहता है।

em और rem में क्या फ़र्क है? em पैरेंट एलिमेंट के फ़ॉन्ट साइज़ के सापेक्ष होता है, जबकि rem हमेशा रूट एलिमेंट के फ़ॉन्ट साइज़ के सापेक्ष होता है।

px के बजाय em क्यों इस्तेमाल करें? em यूज़र की फ़ॉन्ट सेटिंग्स के साथ स्केल होता है, जिससे सुलभता (accessibility) और रिस्पॉन्सिव डिज़ाइन बेहतर बनते हैं।

अंतिम अपडेट: