EM से PX कनवर्टर

EM से PX फ़ॉर्मूला

px = em * पैरेंट-फ़ॉन्ट-आकार

em इकाइयों को पिक्सेल में परिवर्तित करने के लिए, em मान को पैरेंट तत्व के फ़ॉन्ट-आकार से गुणा करें।

नीचे दी गई तालिका सामान्य em से px रूपांतरण दिखाती है जो 16px के पैरेंट फ़ॉन्ट-आकार के आधार पर है। स्केलेबल em मानों को पिक्सेल इकाइयों में परिवर्तित करते समय इसे त्वरित संदर्भ के रूप में उपयोग करें।

PX के बजाय EM का उपयोग क्यों करें?

EM इकाइयाँ आपको घटक-स्तरीय स्केलिंग देती हैं, लेकिन परिणामी पिक्सेल आकार हमेशा स्पष्ट नहीं होते। em को px में परिवर्तित करना नेस्टेड घटकों को डिबग करना, डिज़ाइन स्पेक्स के खिलाफ पैडिंग और टाइपोग्राफी की जांच करना और अन्य टीम सदस्यों को व्यवहार समझाने में आसान बनाता है।

जब आप किसी तत्व के फ़ॉन्ट-आकार को बदलते हैं, तो em में परिभाषित कोई भी माप स्वचालित रूप से समायोजित हो जाता है। पिक्सेल मान स्थिर रहते हैं, जो लचीलापन सीमित कर सकता है और घटकों को स्केल करना कठिन बना सकता है।

• घटक-स्तरीय स्केलिंग: आकार तत्व के अपने फ़ॉन्ट-आकार के अनुसार अनुकूलित होते हैं।
• लचीले UI घटक: स्पेसिंग और टाइपोग्राफी पुन: प्रयोज्य ब्लॉकों के भीतर एक साथ स्केल होती हैं।
• संगत अनुपात: बच्चे तत्व स्वाभाविक रूप से स्केलिंग विरासत में लेते हैं।
• बेहतर रखरखाव: घटक शैलियों में कम निश्चित पिक्सेल मान।

EM का उपयोग करने के लिए सर्वोत्तम प्रथाएँ

कोड em इकाइयों का उपयोग आपको घटक-स्तरीय स्केलिंग देता है जो तत्व के फ़ॉन्ट-आकार के अनुसार अनुकूलित होता है। यह em को लचीले UI घटक बनाने के लिए उपयोगी बनाता है जहाँ टाइपोग्राफी और स्पेसिंग एक साथ बढ़ते हैं।

• घटक-स्तरीय आकार के लिए em का उपयोग करें: एक घटक के भीतर स्पेसिंग और टाइपोग्राफी अपने फ़ॉन्ट-आकार के अनुसार अनुपात में रहती है।
• नेस्टेड तत्वों के लिए em का उपयोग करें: जब पैरेंट फ़ॉन्ट-आकार बदलता है तो बच्चे तत्व स्वाभाविक रूप से स्केल होते हैं।
• जानबूझकर फ़ॉन्ट-आकार सेट करें: em मानों को संकुचित करने से रोकने के लिए अनावश्यक ओवरराइड से बचें।
• em का उपयोग करते समय गहरे नेस्टिंग से बचें: विभिन्न स्तरों की विरासत गणनाओं को अप्रत्याशित बना सकती है।
• स्थिर तत्वों के लिए px को प्राथमिकता दें: बॉर्डर, 1px रेखाएँ या पिक्सेल-परफेक्ट UI भागों को px में रहना चाहिए।
• ग्लोबल टाइपोग्राफी के लिए rem का उपयोग करें: लेआउट-स्तरीय स्केलिंग के लिए rem और घटक स्केलिंग के लिए आवश्यकतानुसार em को मिलाएं।
• पैरेंट फ़ॉन्ट-आकार बदलकर परीक्षण करें: यह पुष्टि करने में मदद करता है कि घटक अपेक्षित रूप से स्केल करता है।

इन सर्वोत्तम प्रथाओं का पालन करने से पूर्वानुमानित स्केलिंग और साफ़ घटक आर्किटेक्चर सुनिश्चित होता है, विशेष रूप से जब em को rem और px के साथ आधुनिक CSS सेटअप में मिलाया जाता है।

CSS में EM कैसे काम करता है

कोड em इकाई उस तत्व के फ़ॉन्ट-आकार पर आधारित होती है जिस पर इसका उपयोग किया जाता है। यदि कोई कस्टम फ़ॉन्ट-आकार सेट नहीं किया गया है, तो यह अपने पैरेंट से मान विरासत में लेता है। इसका मतलब है कि em इकाइयाँ आसपास के संदर्भ की टाइपोग्राफी के आधार पर स्केल कर सकती हैं, जो उन्हें लचीला बनाती है लेकिन कभी-कभी rem की तुलना में अधिक जटिल होती है।

उदाहरण के लिए, यदि किसी तत्व का फ़ॉन्ट-आकार 16px है, तो:

1em = 16px

जब आप em इकाइयों में स्पेसिंग या टाइपोग्राफी परिभाषित करते हैं, तो ब्राउज़र वर्तमान तत्व के फ़ॉन्ट-आकार से em मान को गुणा करके अंतिम पिक्सेल मान की गणना करता है। यह गणना रेंडरिंग के लेआउट चरण के दौरान होती है।

• पैरेंट नियंत्रित: सभी em मान तत्व या उसके पैरेंट के गणना किए गए फ़ॉन्ट-आकार पर निर्भर करते हैं।
• संदर्भ जागरूक: जब उनके पैरेंट फ़ॉन्ट-आकार में बदलाव होता है तो घटक स्वचालित रूप से स्केल होते हैं।
• नेस्टिंग से प्रभावित: नेस्टेड फ़ॉन्ट आकारों के कई स्तर मानों को संकुचित कर सकते हैं, जिससे em शक्तिशाली लेकिन कभी-कभी पूर्वानुमानित करना कठिन हो जाता है।
• घटकों के लिए उपयोगी: em का उपयोग करना नेस्टेड स्पेसिंग और टाइपोग्राफी को UI ब्लॉक के भीतर अनुपात में बनाए रखता है।

संक्षेप में, em लचीली स्केलिंग प्रदान करता है जो आपके घटकों की संरचना का पालन करता है। यह तब आदर्श है जब टाइपोग्राफी और स्पेसिंग को स्थानीय संदर्भ के आधार पर एक साथ बढ़ना चाहिए, न कि वैश्विक रूट के आधार पर।

EM का उपयोग कैसे करें

कोड em इकाइयों का उपयोग करना सरल है जब आप समझते हैं कि वे अपने पैरेंट तत्व से फ़ॉन्ट-आकार कैसे विरासत में लेते हैं। EM विशेष रूप से उन घटकों को बनाने के लिए उपयोगी है जहाँ टेक्स्ट और स्पेसिंग दोनों को एक साथ स्केल करना चाहिए।

1. पैरेंट पर आधार फ़ॉन्ट-आकार सेट करें

कोड 1em का मान वर्तमान तत्व के फ़ॉन्ट-आकार पर निर्भर करता है। यदि आप कस्टम मान सेट नहीं करते हैं, तो यह अपने पैरेंट से विरासत में लेता है। उदाहरण के लिए:

.card {
 font-size: 16px; 
}

इस घटक के भीतर सभी em-आधारित आकार 16px के सापेक्ष गणना करेंगे जब तक कि ओवरराइड न किया जाए।

2. घटक स्केलिंग के लिए em का उपयोग करके फ़ॉन्ट आकार परिभाषित करें

.card-title {
 font-size: 1.5em; 
}
.card-text {
 font-size: 1em; 
}
.card-note {
 font-size: 0.875em; 
}

यदि आप बाद में घटक के आधार फ़ॉन्ट-आकार को बदलते हैं, तो सभी नेस्टेड टेक्स्ट स्वचालित रूप से स्केल होता है।

3. घटक स्पेसिंग के लिए em का उपयोग करें

.button {
  padding: 0.75em 1.25em;
  margin-top: 1em;
}

स्पेसिंग के लिए em का उपयोग करना सुनिश्चित करता है कि बटन, कार्ड और अन्य UI तत्व घटक की टाइपोग्राफी के साथ अनुपात में स्केल होते हैं।

4. em का उपयोग करते समय गहरे नेस्टिंग से बचें

प्रत्येक नेस्टेड फ़ॉन्ट-आकार सभी बच्चे em मानों को प्रभावित करता है। यह शक्तिशाली है, लेकिन यदि अधिक उपयोग किया जाए तो अप्रत्याशित स्केलिंग का कारण बन सकता है।

.parent {
  font-size: 16px;
}
.parent .child {
  font-size: 1.25em;
}
.parent .child .inner {
  font-size: 1.25em;
}

इस उदाहरण में, आंतरिक तत्व अपेक्षित से बड़ा हो जाता है क्योंकि आकार संकुचित होते हैं। em का उपयोग करते समय नेस्टिंग को उथला रखें।

5. स्थिर तत्वों के लिए px का उपयोग करें

बॉर्डर और 1px रेखाएँ अभी भी पिक्सेल में सबसे अच्छी तरह परिभाषित होती हैं:

.button {
  border: 1px solid #ccc;
}

6. पैरेंट फ़ॉन्ट-आकार बदलकर स्केलिंग का परीक्षण करें

पैरेंट कंटेनर के फ़ॉन्ट-आकार को बढ़ाना दिखाएगा कि क्या आपका घटक सही ढंग से स्केल करता है। यदि सब कुछ अनुपात में बढ़ता है, तो आपका em उपयोग सही है।

सुसंगत em उपयोग के साथ, UI घटक लचीले, स्केलेबल और बनाए रखने में आसान रहते हैं, विशेष रूप से जब बड़े डिज़ाइन सिस्टम में rem और px के साथ मिलाया जाता है।

संबंधित कनवर्टर:

• PX to REM कन्वर्टर

  तुरंत पिक्सेल से rem की गणना करें

• REM to PX कन्वर्टर

  तुरंत rem से पिक्सेल की गणना करें

• PX to EM कन्वर्टर

  तुरंत पिक्सेल से em की गणना करें

• VH to PX कन्वर्टर

  तुरंत vh से पिक्सेल की गणना करें

• PX to VW कन्वर्टर

  तुरंत पिक्सेल से vw की गणना करें

• PX to Percent कन्वर्टर

  तुरंत पिक्सेल से प्रतिशत की गणना करें