वेब डेवलपमेंट में px, rem और em CSS में सबसे आम लंबाई यूनिट हैं। सभी साइज़ सेट करते हैं लेकिन उनका रेफरेंस अलग होता है, इसलिए नतीजे अलग हो सकते हैं।
px क्या है
px पिक्सल पर आधारित एक फिक्स्ड यूनिट है। सटीक साइज़ के लिए सहज और आसान, जैसे बॉर्डर, आइकन साइज़, छोटे UI एलिमेंट।
em क्या है
em पैरेंट एलिमेंट के फॉन्ट साइज़ पर आधारित रिलेटिव यूनिट है। पैरेंट साइज़ के साथ बदलता है, इसलिए नेस्टेड लेआउट में उम्मीद से बड़ा या छोटा दिख सकता है।
rem क्या है
rem रूट (html) फॉन्ट साइज़ पर आधारित रिलेटिव यूनिट है। रेफरेंस साइट-वाइड एक जैसा होता है, इसलिए रिस्पॉन्सिव डिज़ाइन और एक्सेसिबिलिटी में अक्सर इस्तेमाल होता है।
कब कौन सा इस्तेमाल करें
फिक्स्ड साइज़ चाहिए तो px ठीक। निरंतरता मायने रखती हो: ग्लोबल फॉन्ट साइज़, स्पेसिंग, लेआउट गैप तो rem ठीक। पैरेंट के साथ स्केल होना चाहिए तो em ठीक, जैसे बटन या कंपोनेंट के अंदर टेक्स्ट।
आम प्रथा
आजकल कई टीम टेक्स्ट और स्पेसिंग के लिए rem और बॉर्डर जैसी बहुत छोटी चीज़ों के लिए px इस्तेमाल करती हैं।
भ्रम क्यों लगता है
शुरू में यूनिट मिलते-जुलते लगते हैं लेकिन रेफरेंस अलग होता है, इसलिए नतीजा काफी बदल सकता है। em खासकर पैरेंट नेस्टिंग से साइज़ बढ़ा सकता है।
समापन
px, rem और em में से हरेक के फायदे-नुकसान हैं। तय करें कि फिक्स्ड साइज़ चाहिए, पैरेंट-रिलेटिव या साइट-वाइड रेफरेंस। EveryUtil यूनिट कन्वर्टर px और rem वैल्यू की तुलना करने में मदद कर सकता है।