उन्हें क्यों?

यह क्रिस कॉयर के नोट Why Ems का अनुवाद है ? css-tricks.com पर।



मैंने फ़ॉन्ट-आकार सेट करने के लिए लंबे समय तक पीएक्स का उपयोग किया, यही वजह है कि इंटरनेट एक्सप्लोरर 6-8 में फ़ॉन्ट आकार नहीं बदल सकता है। उन्हें स्विच करने के कई फायदे हैं, और उन्हें इस लेख में विस्तार से माना गया है।

विभिन्न स्क्रीन पर फोंट का आकार बदलें

यह "पिक्सेल" आकारों की मुख्य समस्या है। उदाहरण के लिए, किसी साइट की सीएसएस शैलियों में, पिक्सेल में 50 बार विभिन्न टाइपोग्राफी तत्वों का फ़ॉन्ट-आकार निर्धारित किया जाता है। इस मामले में, मीडिया क्वेरीज़ को स्केल करने के लिए, आपको इन 50 फ़ॉन्ट-आकार में से प्रत्येक को कॉन्फ़िगर करना होगा। हालाँकि, यदि आप आयामों को em में सेट करते हैं, तो आपको केवल बॉडी टैग में परिवर्तन करने की आवश्यकता है और संपत्ति विरासत में मिलेगी:

body { font-size: x-large; } @media (max-width: 1000px) { body { font-size: large; } } @media (max-width: 500px) { body { font-size: medium; } } 

विभिन्न पिक्सल

Px मान स्क्रीन के भौतिक पिक्सेल के समान नहीं है। सीएसएस पीएक्स में अंतर के बारे में अधिक पढ़ें एक कोणीय माप लेख है।

सापेक्ष पैडिंग

मान लीजिए कि आपको साइट के टेक्स्ट हेडर में आइकन चित्रों का उपयोग करने की आवश्यकता है, जिसमें सही प्रदर्शन के लिए कुछ संकेतक होने चाहिए। आप पैडिंग-लेफ्ट: 20px जैसे निर्माणों का उपयोग नहीं कर सकते क्योंकि ये 20 पिक्सेल स्थिर हैं और फ़ॉन्ट आकार के अनुसार नहीं बदलेंगे। और यदि आप उन्हें इंडेंटेशन निर्दिष्ट करते हैं, तो वे सापेक्ष हो जाएंगे।

संचार

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

मरहम में उड़ना

फिर भी, उन्हें कुछ अप्रिय कमियां हैं, उदाहरण के लिए, "कैस्केडिंग": यदि आप सामान्य सूची तत्वों को (ली) फ़ॉन्ट-आकार: 1.1em पर सेट करते हैं , तो बच्चे (नेस्टेड) ​​तत्व इस मान को जोड़ देंगे। आप ली ली {फ़ॉन्ट-आकार: 1em का उपयोग करके समस्या को हल कर सकते हैं ; } , हालांकि यह बहुत ही डरावना है। हटाने के लिए फ़ॉन्ट आकार असाइन करना यहां मदद कर सकता है, लेकिन सभी ब्राउज़र इस विधि (IE 9+) का समर्थन नहीं करते हैं।