Posted on • Updated on
CSS میں EM یونٹ کو سمجھنا
CSS EM یونٹ کے بارے میں عام سوالات
آخر میں، ہم CSS EM یونٹ کے بارے میں اکثر پوچھے جانے والے چند سوالات کے جواب دیں گے۔
em اور rem یونٹس میں کیا فرق ہے؟
em اور rem یونٹس کا بنیادی فرق ان کے بنیادی سائز کے حوالہ جاتی نقطوں میں ہے۔ em یونٹ اپنے پیرنٹ عنصر کے font-size کے لحاظ سے ہوتی ہے۔ rem کا مطلب "root em" ہے اور یہ صرف روٹ عنصر (html) کے لحاظ سے ہوتی ہے۔ اس سے rem یونٹ بڑی ویب سائٹس میں زیادہ قابلِ پیش گوئی اور سنبھالنے میں آسان بن جاتی ہے۔
CSS میں پکسل کو em میں کیسے تبدیل کریں؟
پکسل کو em میں تبدیل کرنے کے لیے آپ کو 1em کا کل سائز معلوم ہونا چاہیے، جو بطور ڈیفالٹ 16px ہے۔
پھر فارمولا لگائیں: px / em۔
مثال کے طور پر، 1em کا سائز 16px ہو تو 32px تبدیل ہو کر 32 / 16 = 2em ہوگا۔
آسانی سے تبدیل کرنے کے لیے ہمارا PX to EM کنورٹر دیکھیں۔
CSS میں em یونٹ کو پکسل میں کیسے تبدیل کریں؟
em کو پکسل میں تبدیل کرنے کے لیے 1em کا سائز معلوم ہونا چاہیے، جو بطور ڈیفالٹ 16px ہے۔
پھر فارمولا لگائیں: em * em size۔ 1em کا سائز 16px ہو تو 2em تبدیل ہو کر 2 * 16 = 32px ہوگا۔
آسانی سے تبدیل کرنے کے لیے EM to PX کنورٹر استعمال کریں۔
مجھے پکسل کے بجائے EM یونٹس کیوں استعمال کرنے چاہئیں؟
em یونٹ پکسلز کے مقابلے میں کئی فوائد دیتی ہے۔ یہ صارف کے براؤزر کی سیٹنگز کے مطابق ایڈجسٹ ہوتی ہے، جس سے font-size بڑھانے والے صارفین کے لیے ویب سائٹ زیادہ قابلِ رسائی ہوتی ہے۔ em یونٹ پیرنٹ عنصر کے font-size کے مطابق بدلتی ہے، اس لیے ڈیزائن زیادہ لچکدار اور جوابی بنتا ہے۔
کیا میں font-size کے علاوہ دیگر اسٹائلز کے لیے em یونٹ استعمال کر سکتا ہوں؟
ہاں، em یونٹ ہر اس CSS اسٹائل پراپرٹی کے لیے استعمال ہو سکتی ہے جو لمبائی کی قدر قبول کرتی ہے، صرف font-size کے لیے نہیں۔ مثلاً: width، height، padding، margin اور line-height۔ ان پراپرٹیز کے لیے em استعمال کرنا مختلف اسکرین سائزز پر متناسب لے آؤٹ برقرار رکھنے میں مدد دیتا ہے۔
کیا تمام براؤزر em یونٹ کی حمایت کرتے ہیں؟
ہاں، Chrome، Firefox، Safari اور Edge سمیت جدید براؤزر em یونٹ کی وسیع حمایت کرتے ہیں۔ em یونٹ کی حمایت کے بارے میں caniuse دستاویزات میں پڑھ سکتے ہیں۔
اگر میں EM یونٹ والے عناصر کو نیسٹ کروں تو کیا ہوگا؟
اگر آپ em یونٹ استعمال کرنے والے عناصر کو نیسٹ کریں تو چائلڈ عنصر کا سائز پیرنٹ عنصر کے سائز کے لحاظ سے ہوگا۔ اس سے چائلڈ عنصر متوقع سے بڑا یا چھوٹا ہو سکتا ہے۔ اس سے بچنے کے لیے rem یونٹ استعمال کریں، جو ہمیشہ روٹ عنصر (html) کے سائز کے لحاظ سے ہوتی ہے۔
کیا EM یونٹ استعمال کرنے کے کوئی نقصانات ہیں؟
اگرچہ em یونٹ کے بہت سے فوائد ہیں، لیکن اسے px جیسی مطلق یونٹس کے مقابلے میں سنبھالنا مشکل ہو سکتا ہے۔ em نسبتی ہونے کی وجہ سے اس کا اصل سائز پیرنٹ عنصر کے سائز کے مطابق بدل سکتا ہے۔ اس سے عناصر کے سائز کا اندازہ لگانا مشکل ہو سکتا ہے، خاص طور پر پیچیدہ لے آؤٹس میں۔
کیا میں میڈیا کوئریز میں EM یونٹ استعمال کر سکتا ہوں؟
ہاں، آپ میڈیا کوئریز میں em یونٹ استعمال کر سکتے ہیں۔ درحقیقت، میڈیا کوئریز میں em یونٹ استعمال کرنے سے آپ کے ڈیزائن کی ردعمل پذیری بہتر ہو سکتی ہے۔ چونکہ em یونٹس نسبتی ہوتے ہیں، اس لیے وہ صارف کے براؤزر کی ترتیبات کے مطابق خود کو ایڈجسٹ کرتے ہیں۔ اس کا مطلب ہے کہ آپ کی میڈیا کوئریز صارف کی ترتیبات کے مطابق ڈھل جائیں گی۔
میں EM یونٹ کے ساتھ نیسٹڈ عناصر کا سائز کیسے حساب کر سکتا ہوں؟
em یونٹ کے ساتھ نیسٹڈ عناصر کا سائز حساب کرنے کے لیے، پیرنٹ عنصر کے سائز کو چائلڈ عنصر کے سائز سے ضرب دیں۔ مثال کے طور پر، اگر پیرنٹ عنصر کا سائز 1.5em اور چائلڈ عنصر کا سائز 2em ہو تو چائلڈ عنصر کا اصل سائز 1.5 * 2 = 3em ہوگا۔ اس کی وجہ یہ ہے کہ چائلڈ عنصر کا سائز پیرنٹ عنصر کے سائز کے نسبت ہوتا ہے۔