PX से EM कनवर्टर

EM से PX सूत्र

em = px / माता-पिता-फ़ॉन्ट-आकार

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

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

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

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

जब आप किसी तत्व के फ़ॉन्ट-आकार को बदलते हैं, तो 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;
}

माता-पिता के फ़ॉन्ट-आकार को बदलकर स्केलिंग का परीक्षण करें

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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