px کو em میں بدلنا Pixels ↔ Em مفت آن لائن محفوظ
px میں کوئی قدر لکھیں اور اسی جگہ em میں پڑھ لیں۔ حساب آپ کے براؤزر میں ہوتا ہے، کہیں کچھ نہیں بھیجا جاتا، اور جواب کس پر منحصر ہے وہ فرض نہیں کیا جاتا بلکہ نیچے لکھا ہے۔
کچھ بھی اپ لوڈ نہیں
عام سائز — px کو em میں بدلنا
| px | em |
|---|---|
| 8 | 0.5 |
| 10 | 0.625 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 48 | 3 |
| 64 | 4 |
یہ اکائیاں کہاں سے آئیں
CSS کا پکسل آپ کی اسکرین کا پکسل نہیں۔ جب اسکرینوں کی کثافت کا اندازہ لگانا ممکن نہ رہا، تو اصلی پکسلوں میں ناپا گیا صفحہ ایسا صفحہ بن گیا جو اسکرینیں باریک ہونے کے ساتھ سکڑتا جاتا تھا؛ سو CSS پکسل کو ایک حوالہ لمبائی کے طور پر نئے سرے سے متعین کیا گیا: آرام دہ پڑھنے کے فاصلے سے دیکھا گیا، انچ کا تقریباً چھیانوےواں حصہ۔ اس صفحے کی باقی ہر چیز اسی پر کھڑی ہے۔ em ویب سے پرانا ہے — سیسے کے حروف میں یہ ایک ڈھلے ہوئے بلاک کی چوڑائی تھی، جس کا نام بڑے M سے لیا گیا — اور CSS میں اس سے مراد نافذ خط کی جسامت ہے، اسی لیے عناصر کو ایک دوسرے میں رکھنے پر وہ بدلتی ہے۔ rem اسی سے بچنے کے لیے شامل کیا گیا: یہ جڑ والے عنصر کا em ہے اور کبھی جمع نہیں ہوتا۔ vw جوابی ڈیزائن کے ساتھ آیا: دکھائی دینے والے علاقے کی چوڑائی کا سواں حصہ، وہ چوڑائی جو بھی نکلے۔
آپ انہیں کہاں ملتے ہیں
یہ ہر اسٹائل شیٹ کی اکائیاں ہیں۔ پکسل حاشیوں، سایوں اور ہر اُس چیز کا ناپ طے کرتے ہیں جسے بڑھنا نہیں چاہیے؛ rem خط، وقفوں اور ترتیب کا ناپ طے کرتا ہے، سو جڑ پر ایک تبدیلی پورے مظہر کا ناپ بدل دیتی ہے؛ em اُن چیزوں کا ناپ طے کرتا ہے جنہیں اپنے ہی متن کے پیچھے چلنا چاہیے، جیسے بٹن کے اندر کی گنجائش؛ vw اُن سرخیوں اور ابتدائی حصوں کا جو ہر آلے پر اسکرین بھر دیں۔ ان کے درمیان تبدیلی وہی روزمرہ کا حساب ہے جس سے پکسلوں میں دیا گیا ڈیزائن ایک ایسی اسٹائل شیٹ بنتا ہے جو پھیلتی سکڑتی ہے۔
اکثر پوچھے جانے والے سوالات
16 px ہی عام نقطۂ آغاز کیوں ہے؟
کیونکہ ہر بڑے براؤزر میں متن کی طے شدہ جسامت یہی ہے، اور جو اسٹائل شیٹ اسے نہ بدلے وہ اسے ورثے میں پاتی ہے۔ سو طے شدہ ترتیب پر ایک rem 16 px کے برابر ہوتا ہے، اور مانوس تبدیلیاں وہیں سے آتی ہیں: 0.5 rem یعنی 8 px، 1.5 rem یعنی 24 px۔ اگر صارف نے براؤزر کی ترتیبات میں طے شدہ قدر بڑی کر رکھی ہو تو وہی rem کی قدریں بھی اس کے ساتھ بڑھ جاتی ہیں — اور انہیں برتنے کا مقصد بالکل یہی ہے۔
rem برتوں یا em؟
ہر اُس چیز کے لیے rem جسے پورے صفحے کے پیچھے چلنا چاہیے — خط کی سیڑھی، وقفے، ترتیب کی چوڑائیاں — کیونکہ وہ جڑ سے ناپا جاتا ہے اور کبھی جمع نہیں ہوتا۔ ہر اُس چیز کے لیے em جسے اُس متن کے پیچھے چلنا چاہیے جس میں وہ بیٹھی ہے: بٹن کی اندرونی گنجائش، آئیکون کے پہلو کا وقفہ، اقتباس کا دباؤ۔ عام غلطی یہ ہے کہ em میں ناپے گئے عناصر ایک دوسرے میں رکھے جائیں: 1.2 em کے اندر 1.2 em بن جاتا ہے 1.44، پھر 1.73، یہاں تک کہ صفحے کے نیچے کا متن مطلوبہ جسامت سے دُگنا ہو جاتا ہے۔
کیا جواب بالکل درست ہے؟
جہاں دونوں اکائیاں ایک دوسرے سے صحیح اعداد میں متعین ہوں، وہاں ہاں — صفحہ یہ بات عدد کے اوپر کہتا ہے، اور واحد گولائی اس میں ہے کہ کتنے ہندسے دکھائے جائیں۔ جہاں نسبت کا اعشاریہ ختم نہ ہوتا ہو، صفحہ بارہ بامعنی ہندسے دکھاتا ہے اور کہتا ہے کہ تعلق تقریبی ہے، بجائے اس کے کہ کچھ اور ظاہر کرے۔
جو میں لکھتا ہوں وہ میرے آلے سے باہر جاتا ہے؟
نہیں۔ حساب آپ ہی کے براؤزر میں ہوتا ہے؛ کچھ اپ لوڈ نہیں ہوتا، اور نہ ہی کوئی سرور ہے جہاں ہو۔ صفحہ ایک بار کھل جائے تو نیٹ ورک بند ہونے پر بھی چلتا ہے۔
آپ px کو em میں کیوں تبدیل کرتے ہیں
em CSS کی سب سے پرانی نسبتی اکائی ہے اور وہ جو سب سے زیادہ بحثیں کراتی ہے۔ آپ کے پاس ڈیزائن فائل سے پکسل میں ایک سائز ہے، بٹن کی 20 px پیڈنگ، آئیکن کے برابر 14 px خالی جگہ، عنوان کے لیے 36 px، اور آپ اسے em میں چاہتے ہیں، تاکہ وہ اس متن کی پیروی کرے جس کا وہ حصہ ہے۔ جب آپ px کو em میں تبدیل کرتے ہیں تو آپ ایک خاص سوال پوچھ رہے ہوتے ہیں: یہ موجودہ فونٹ سائز کا کتنا گنا ہے؟ جواب ایک ایسے عدد پر منحصر ہے جسے صفحہ اندازہ نہیں لگا سکتا، یعنی وہ فونٹ سائز جو وہاں نافذ ہے جہاں قدر استعمال ہو رہی ہے، اس لیے کنورٹر اس عدد کو ایک خانے میں رکھتا ہے اور کھل کر استعمال کرتا ہے۔
سائز em میں لکھنے کی وجہ یہ ہے کہ جو چیزیں متن سے تعلق رکھتی ہیں انہیں متن کے ساتھ بڑھنا چاہیے۔ بٹن کے اندر کی پیڈنگ تب بڑی ہونی چاہیے جب بٹن کا لیبل بڑا ہو۔ آئیکن اور اس کے کیپشن کے درمیان کا فاصلہ تب چوڑا ہونا چاہیے جب کیپشن ہو۔ عنوان کا نچلا مارجن عنوان کے تناسب میں رہنا چاہیے۔ ان سب صورتوں میں پکسل کی قدر فونٹ سائز بدلتے ہی غلط ہو جاتی ہے، اور em کی قدر کسی بھی سائز پر درست رہتی ہے۔ em کے حق میں پوری دلیل یہی ہے، اور یہ مضبوط ہے۔
حساب آپ کے براؤزر میں ہوتا ہے، اور کچھ اپ لوڈ نہیں ہوتا۔ نیچے آپ کو فارمولا ملے گا، یہ وجہ کہ em کو rem سے زیادہ احتیاط چاہیے، تہہ در تہہ (nesting) کا پھندا جو حیران کن سائز پیدا کرتا ہے، وہ جگہیں جہاں em درست اکائی ہے، اور حقیقی اسٹائل شیٹ میں em اور rem کے درمیان چننے کا طریقہ۔
فارمولا اور بنیاد
em برابر ہے px تقسیم فونٹ سائز
فارمولا ایک تقسیم ہے: em = px ÷ base۔ 16 px کی بنیاد کے ساتھ، 24 px کی قدر 1.5 em بن جاتی ہے، 8 px بن جاتا ہے 0.5 em اور 20 px بن جاتا ہے 1.25 em۔ صفحہ نتیجے کے ساتھ بنیاد دکھاتا ہے، جیسے 24 px = 1.5 em (16 px)، تاکہ آپ دیکھ سکیں کہ کیا فرض کیا گیا تھا۔ حساب وہی ہے جو rem کا ہے۔ مطلب مختلف ہے۔
بنیاد کیا ہے
rem کے لیے بنیاد روٹ عنصر کا فونٹ سائز ہے۔ em کے لیے وہ اس عنصر کا فونٹ سائز ہے جہاں قدر استعمال ہو رہی ہو، یا، خود font-size خاصیت کے لیے، والد عنصر کا۔ اسی لیے em کا کوئی ایک جواب نہیں: وہی اسٹائل شیٹ کی قدر مختلف جگہوں پر مختلف پکسل سائز کا مطلب رکھتی ہے۔ اگر آپ ایسے بٹن کی پیڈنگ تبدیل کر رہے ہیں جس کا متن 14 px ہے تو بنیاد کے طور پر 14 ٹائپ کیجیے۔ اگر آپ 32 px کے عنوان کا مارجن تبدیل کر رہے ہیں تو 32 ٹائپ کیجیے۔
جب آپ کو معلوم نہ ہو تو ڈیفالٹ
اگر آپ بس موٹا اندازہ چاہتے ہیں تو بنیاد کو 16 پر چھوڑ دیجیے، اس براؤزر میں عام متن کا سائز جسے کسی نے بدلا نہیں۔ نتیجہ عام باڈی ٹیکسٹ کے بلاک کے لیے درست ہے، اور یہ آپ کو تناسب کا احساس دیتا ہے چاہے عنصر کا سائز مختلف نکلے۔
تبدیلی کیا رکھتی ہے اور کیا نہیں رکھ سکتی
یہ متن سے تناسب رکھتی ہے
نتیجہ اس فونٹ سائز کے مقابلے میں تناسب ہے جو وہاں نافذ ہے جہاں قدر استعمال ہو رہی ہے۔ em میں لکھی ہوئی جگہ اپنے ساتھ والے متن کے ساتھ بڑھتی اور سکڑتی ہے، اور الفاظ کے گرد فاصلے کو ٹھیک اسی طرح برتاؤ کرنا چاہیے۔
یہ پورے صفحے کے لیے ایک عدد نہیں دے سکتی
یہاں احتیاط چاہیے۔ em خود عنصر کے فونٹ سائز کے نسبت ہے، یا، font-size کے لیے، اس کے والد کے، روٹ کے نہیں۔ اس لیے صفحے کا کوئی ایک جواب نہیں: وہی 1.5 em ایک 16 px کے عنصر کے اندر 24 px ہے اور 24 px کے عنصر کے اندر 36 px، اور em کے اندر em ضرب دیتا ہے۔ صفحے پر عدد خانے میں موجود بنیاد کے لیے درست ہے اور کسی اور کے لیے نہیں۔ اگر آپ کو ایک ایسا عدد چاہیے جو ہر جگہ قائم رہے تو rem اسی کے لیے ہے۔ موازنے کے لیے px کو rem میں تبدیل کیجیے اور دیکھیے کہ وہی پکسل کی قدر کیسے برتاؤ کرتی ہے۔
گولائی
16 سے تقسیم بہت سے سائزوں کے لیے صاف قدریں دیتی ہے اور دوسروں کے لیے دہرانے والے اعشاریے۔ 0.8125 em جیسی قدر اسٹائل شیٹ میں ٹھیک ہے، لیکن اگر عین سائز اہم نہ ہو تو آپ اسے 0.8 یا 0.85 تک گول کرنا پسند کر سکتے ہیں۔ جہاں درستی اہم ہو وہاں پورا عدد رکھیے۔
تہہ در تہہ کا پھندا
em کیسے ضرب در ضرب بڑھتا ہے
فرض کیجیے کسی فہرست کا font-size: 0.875em ہے اور اس کے آئٹم کا بھی font-size: 0.875em ہے۔ فہرست اپنے والد کا 87.5% ہے۔ ہر آئٹم فہرست کا 87.5% ہے، جو والد کا تقریباً 76.6% ہے۔ آئٹم کے اندر تہہ دار فہرست دوبارہ سکڑتی ہے، تقریباً 67% تک۔ تین سطحوں کے بعد متن بہت چھوٹا ہو جاتا ہے، اور کسی نے یہ جان بوجھ کر نہیں لکھا۔ یہی مطلب ہے اس کہنے کا کہ em ضرب در ضرب بڑھتا ہے۔
px کو em میں تبدیل کرتے وقت یہ کیوں اہم ہے
اگر آپ font-size کے لیے پکسل کی قدر کو em میں تبدیل کرتے ہیں تو آپ کو جو بنیاد استعمال کرنی ہے وہ والد کا فونٹ سائز ہے، عنصر کا اپنا نہیں۔ بہت سی غلطیاں غلط والی کے استعمال سے آتی ہیں۔ دوسری خصوصیات کے لیے، جیسے padding اور margin، بنیاد عنصر کا اپنا فونٹ سائز ہے۔ اصول کہنے میں آسان ہے اور بھولنے میں بھی: font-size اوپر دیکھتا ہے، باقی سب اپنے آپ کو۔
حیرتوں سے کیسے بچیں
جو جگہ متن کی پیروی کرے اس کے لیے em استعمال کیجیے، اور فونٹ سائز کے لیے rem۔ اس طرح فونٹ سائز کبھی ضرب در ضرب نہیں بڑھتے، کیونکہ وہ روٹ کا حوالہ دیتے ہیں، اور جگہ پھر بھی اپنے متن کی پیروی کرتی ہے۔ یہ وہ امتزاج ہے جس پر زیادہ تر جدید اسٹائل شیٹیں آ ٹھہرتی ہیں۔
عام سائز
صفحے کے نچلے حصے میں جدول
کنورٹر کے نیچے عام سائزوں کا جدول ہے اس بنیاد پر جو آپ مقرر کریں: 8 px کا مطلب 0.5 em ہے، 10 px کا مطلب 0.625، 12 px کا مطلب 0.75، 14 px کا مطلب 0.875، 16 px کا مطلب 1، 18 px کا مطلب 1.125، 20 px کا مطلب 1.25، 24 px کا مطلب 1.5، 32 px کا مطلب 2، 48 px کا مطلب 3 اور 64 px کا مطلب 4۔ 16 کی بنیاد پر یہ وہی اعداد ہیں جو rem کے لیے ہیں، اسی لیے لوگ دونوں کو الجھاتے ہیں۔ فرق اس میں ہے کہ 16 کس کی نمائندگی کرتا ہے۔
عنصر کے مطابق بنیاد بدلنا
اگر آپ چھوٹے بٹن کے لیے بنیاد 14 مقرر کریں تو جدول بدل جاتا ہے: 14 px اب 1 em ہے، 7 px ہے 0.5 em اور 21 px ہے 1.5 em۔ آزمائیے، اور آپ دیکھیں گے کہ 1.5 em کی پیڈنگ کا پکسل سائز 14 px کے بٹن میں 18 px کے بٹن سے مختلف کیسے ہوتا ہے، اور یہ کیوں مفید ہے۔
یہاں px کو em میں کیسے تبدیل کریں
پکسل کی قدر ٹائپ کیجیے
پہلے خانے میں پکسل میں سائز درج کیجیے۔ اعشاریے قبول ہیں۔
وہ فونٹ سائز مقرر کیجیے جس کا em حوالہ دیتا ہے
عنصر کا فونٹ سائز ٹائپ کیجیے، یا اس کے والد کا اگر آپ font-size تبدیل کر رہے ہیں۔ اگر یقین نہ ہو تو 16 رہنے دیجیے اور نتیجے کو اندازہ سمجھیے۔
em کی قدر نقل کیجیے
اپنے CSS میں عدد کو اس کی اکائی کے ساتھ استعمال کیجیے، جیسے padding: 1.25em۔ اکائی کے بغیر عدد زیادہ تر خصوصیات کے لیے درست نہیں۔
یہ اکائیاں کہاں سے آتی ہیں
دھاتی ٹائپ میں em
em ویب سے پرانا ہے۔ دھاتی ٹائپ میں یہ ڈھلے ہوئے بلاک کی چوڑائی تھی، جس کا نام بڑے M پر رکھا گیا، اور چھپی ہوئی سطر پر افقی جگہ کی قدرتی اکائی تھی۔ ٹائپوگرافر اب بھی em ڈیش اور em اسپیس کی بات کرتے ہیں۔ CSS میں یہ خیال زیادہ ڈھیلی شکل میں باقی ہے: ایک em موجودہ فونٹ کا سائز ہے۔
پکسل اور rem
CSS پکسل آرام دہ پڑھنے کے فاصلے سے دیکھے جانے والے ایک انچ کے 1/96 کے لگ بھگ حوالہ لمبائی ہے، آپ کی اسکرین پر نقطہ نہیں۔ rem اس لیے شامل کیا گیا کہ ڈویلپرز کو ایسی اکائی ملے جو نسبتی ہو مگر کبھی ضرب در ضرب نہ بڑھے: یہ روٹ عنصر کا em ہے۔ ان کے درمیان پکسل، em اور rem تین ضرورتیں پوری کرتے ہیں: مقررہ سائز، متن کے نسبت سائز، اور صفحے کے نسبت سائز۔
em کہاں صحیح انتخاب ہے
بٹنوں اور فارم کے خانوں کے اندر پیڈنگ
padding: 0.5em 1em والا بٹن متن کے کسی بھی سائز پر تناسب میں ایک جیسا لگتا ہے۔ لیبل بڑا کیجیے اور پورا بٹن اس کے ساتھ بڑھتا ہے، جو آپ ایسے جزو سے چاہتے ہیں جو ٹول بار میں بھی استعمال ہو سکتا ہے اور ہیرو بینر میں بھی۔
آئیکن کے برابر جگہ
آئیکن کے بعد کیپشن کو ایسا فاصلہ چاہیے جو کیپشن کے ساتھ پیمانہ بنائے۔ 0.4em کا مارجن یہ کرتا ہے؛ 6px کا نہیں۔
عنوانوں اور پیراگرافوں کے گرد مارجن
دستاویز میں عمودی تال رکھنا تب آسان ہوتا ہے جب پیراگراف کا فاصلہ em میں ہو، کیونکہ وہ پیراگراف کے سائز کی پیروی کرتا ہے۔ em میں عنوان کا مارجن تناسب میں رہتا ہے جب عنوان مختلف بریک پوائنٹس پر سائز بدلتا ہے۔
میڈیا کوئری
em میں لکھے بریک پوائنٹ قاری کے متن کے سائز پر ردِعمل دیتے ہیں، اس لیے جس نے اپنا متن بڑا کیا ہو اس کے لیے ترتیب اپنی تنگ شکل میں پہلے بدل جاتی ہے۔ میڈیا کوئری میں em براؤزر کے ڈیفالٹ کا حوالہ دیتا ہے نہ کہ کسی عنصر کا، اس لیے یہ ضرب در ضرب نہیں بڑھتا۔
px کو em میں تبدیل کرتے وقت پھندے
غلط بنیاد استعمال کرنا
سب سے عام غلطی۔ font-size کے لیے والد کا سائز استعمال کیجیے؛ باقی سب کے لیے عنصر کا اپنا۔ بنیاد ٹائپ کرنے سے پہلے جانچیے کہ آپ کون سی خاصیت تبدیل کر رہے ہیں۔
یہ بھول جانا کہ والد بھی em میں ہو سکتا ہے
اگر والد کا فونٹ سائز خود em میں ہو تو سچا سائز جاننے کے لیے آپ کو زنجیر کو اوپر کی طرف چلنا ہوگا۔ جب اسٹائل شیٹ پیچیدہ ہو جائے تو فونٹ سائز rem میں بدل دیجیے اور em کو جگہ کے لیے رکھیے۔
پورے جزو کے لیے ایک عدد کی توقع رکھنا
جس جزو میں مختلف سائز کا متن ہو اس کے حصوں کے لیے کوئی ایک em قدر نہیں ہوتی۔ ہر حصے کو اس کی اپنی بنیاد کے مقابل تبدیل کیجیے۔
ایک ہی خاصیت کے لیے em اور rem ملانا
1rem کی پیڈنگ کے ساتھ 1em کا مارجن جائز ہے اور اکثر الجھانے والا۔ کوئی اصول چنیے، جیسے فونٹ سائز کے لیے rem اور جگہ کے لیے em، اور اس پر قائم رہیے۔
تبدیل کرنے سے پہلے لوگ کیا پوچھتے ہیں
16 px کتنے em ہے؟
ایک، اگر وہاں نافذ فونٹ سائز 16 px ہو۔ اگر عنصر کا فونٹ سائز 20 px ہو تو 16 px کا مطلب 0.8 em ہے۔
کیا em، rem سے بہتر ہے؟
کوئی بھی بہتر نہیں۔ rem فونٹ سائز اور عالمی ترتیب کے لیے بہتر ہے۔ em اس جگہ کے لیے بہتر ہے جسے اپنے متن کی پیروی کرنی چاہیے۔
میری پیڈنگ توقع سے بڑی کیوں ہے؟
اس لیے کہ وہ عنصر کے فونٹ سائز کے نسبت ہے، جو آپ کے فرض کیے ہوئے سے بڑا ہو سکتا ہے۔ براؤزر کے ڈویلپر ٹولز میں حساب شدہ فونٹ سائز جانچیے۔
کیا میں اعشاریے استعمال کر سکتا ہوں؟
جی ہاں۔ 0.625em اور 1.333em جیسی قدریں معمول کی ہیں۔
کیا میرا عدد اپ لوڈ ہوتا ہے؟
نہیں۔ حساب آپ کے براؤزر میں چلتا ہے اور کچھ کہیں نہیں بھیجا جاتا۔
میں واپس کیسے جاؤں؟
em کو px میں کے ذریعے، جو تقسیم کرنے کے بجائے ضرب دیتا ہے۔
px کو em میں تبدیل کرتے وقت دانش مندی سے چننا
طے کیجیے کہ قدر کس سے تعلق رکھتی ہے
اگر وہ متن سے تعلق رکھتی ہے تو em صحیح ہے۔ اگر وہ صفحے سے تعلق رکھتی ہے، جیسے کالم کی چوڑائی یا سیکشن کا فاصلہ، تو rem یا ویو پورٹ کی اکائی بہتر موزوں ہے۔ px کو vw میں سائز کو اسکرین کی چوڑائی کے حصے کے طور پر ظاہر کرتا ہے۔
ارادہ تبصرے میں لکھیے
padding: 0.75em 1.25em; /* 12px 20px at 16px */ جیسی سطر استدلال کو نظر آنے والا بنا دیتی ہے۔ جب بعد میں فونٹ سائز بدلے گا تو آپ کو معلوم ہوگا کہ اعداد کا مقصد کیا تھا۔
جزو کا فونٹ سائز ایک جگہ رکھیے
فونٹ سائز جزو کے روٹ عنصر پر مقرر کیجیے اور اندر کی ہر چیز کو اس کا حوالہ دینے دیجیے۔ پھر اندر کی em قدریں جزو میں ہر جگہ ایک ہی مطلب رکھتی ہیں، اور آپ ایک ہی بنیاد کے مقابل px کو em میں تبدیل کر سکتے ہیں۔
px کو em میں تبدیل کرتے وقت اچھی عادتیں
ایک وقت میں ایک جزو px کو em میں تبدیل کیجیے
پوری اسٹائل شیٹ کے لیے ایک ہی بار px کو em میں تبدیل کرنے کی کوشش نہ کیجیے۔ ایک جزو لیجیے، جیسے کارڈ یا بٹن، اس کا فونٹ سائز طے کیجیے، اور اس کی ہر جگہ کی قدر کو اسی سائز کے مقابل تبدیل کیجیے۔ جب جزو مکمل ہو جائے تو اسے دو یا تین متن کے سائزوں پر آزمائیے۔ پھر اگلے پر جائیے۔
طاق قدروں کے لیے کیلکولیٹر استعمال کیجیے، گول قدروں کے لیے نہیں
8، 16 اور 24 پکسل جیسی قدریں 16 کی بنیاد پر صاف em اعداد میں تبدیل ہوتی ہیں۔ 22 یا 13 جیسی طاق قدریں لمبے اعشاریے دیتی ہیں۔ جب آپ ان کے لیے px کو em میں تبدیل کریں تو فیصلہ کیجیے کہ ڈیزائن کو واقعی عین عدد چاہیے یا قریب ترین گول em قدر اتنی ہی اچھی ہو گی۔ ڈیزائنر اکثر گول کرنے پر خوش ہوتے ہیں، اور صاف اسٹائل شیٹ کی دیکھ بھال آسان ہوتی ہے۔
بنیاد کا ریکارڈ رکھیے
ہر em قدر کے ساتھ مختصر تبصرہ، جو بتائے کہ بنیاد کیا تھی، اگلے شخص کی مدد کرتا ہے۔ اگر کوئی بعد میں جزو کا فونٹ سائز بدلے تو اسے معلوم ہوگا کہ جگہ اس کی پیروی ڈیزائن کے مطابق کرتی ہے، حادثے سے نہیں۔ اسے ایک بار لکھنا اتنے وقت کے قابل ہے جتنا یہ لیتا ہے۔
rem کے برابر سے موازنہ کیجیے
اگر آپ کو یقین نہیں کہ کسی قدر کے لیے em موزوں ہے یا rem، تو px کو em اور rem دونوں میں تبدیل کیجیے اور پوچھیے کہ جب متن کا سائز بدلے تو کیا ہونا چاہیے۔ اگر قدر کو عنصر کے اپنے متن کی پیروی کرنی چاہیے تو em لیجیے۔ اگر صفحے کی تو rem۔
متعلقہ کنورٹر
اوزاروں کا یہی خاندان ملتی جلتی تبدیلیوں کا احاطہ کرتا ہے۔ واپس پکسل کی طرف جانے کے لیے em کو px میں استعمال کیجیے۔ روٹ کے نسبت سائز کے لیے px کو rem میں اور rem کو px میں ہیں، اور اسکرین کے نسبت سائز کے لیے px کو vw میں اور vw کو px میں۔ اسی اسٹائل شیٹ کے رنگوں کے لیے HEX کو RGB میں اور HEX کو HSL میں اشارہ بندیوں کو سنبھالتے ہیں۔
ایک حل شدہ مثال
فرض کیجیے بٹن کا لیبل 14 px ہے اور ڈیزائن بٹن کو 10 px عمودی پیڈنگ اور 20 px افقی پیڈنگ دیتا ہے۔ آپ بنیاد کے طور پر 14 ٹائپ کرتے ہیں، 10 ٹائپ کر کے 0.714 em پڑھتے ہیں، 20 ٹائپ کر کے 1.429 em پڑھتے ہیں۔ اسٹائل شیٹ میں آپ لکھتے ہیں padding: 0.714em 1.429em۔ جب وہی بٹن 18 px کے لیبل والے ہیرو میں استعمال ہوتا ہے تو پیڈنگ تناسب میں 12.9 px اور 25.7 px بن جاتی ہے۔ اگر آپ 10px اور 20px لکھتے تو بڑے متن کے گرد بٹن پتلا لگتا۔
ایک مختصر چیک لسٹ
تبدیل کرنے سے پہلے
طے کیجیے کہ قدر کس خاصیت سے تعلق رکھتی ہے، اور وہ فونٹ سائز ڈھونڈیے جس کے نسبت وہ ہونی چاہیے۔
تبدیل کرتے وقت
پکسل کی قدر اور صحیح بنیاد ٹائپ کیجیے، اور em کا عدد اس کی اکائی کے ساتھ نقل کیجیے۔
تبدیل کرنے کے بعد
براؤزر میں جزو کا فونٹ سائز بدلیے اور جانچیے کہ جگہ پیروی کرتی ہے۔ ضرب در ضرب بڑھنے والی تہہ دار em قدریں تلاش کیجیے۔
عام غلطیاں
پیڈنگ کے لیے روٹ سائز کو بنیاد بنانا
یہ rem کا کام ہے۔ em عنصر کے اپنے فونٹ سائز کا حوالہ دیتا ہے۔
ہر فونٹ سائز کے لیے em استعمال کرنا
تہہ دار em فونٹ سائز ضرب در ضرب بڑھتے ہیں اور آپ کو حیران کرتے ہیں۔ فونٹ سائز کے لیے rem استعمال کیجیے۔
دیکھنے میں صاف مگر غلط عدد تک گول کرنا
1.43 وہی نہیں جو 1.5 ہے جب بڑے فونٹ سے ضرب دیا جائے۔ کافی ہندسے رکھیے۔
آپ کے اعداد آپ کے آلے پر رہتے ہیں
حساب مقامی طور پر ہوتا ہے۔ آپ کی قدریں آپ کا اپنا براؤزر استعمال کرتا ہے اور کچھ کہیں نہیں بھیجا جاتا۔ بعد میں حذف کرنے کو کچھ نہیں اور بنانے کو کوئی اکاؤنٹ نہیں۔ px کو em میں تبدیل کرنے کا یہی سادہ طریقہ ہے۔
خلاصہ
یہاں px کو em میں تبدیل کرنے کے لیے پکسل میں سائز اور وہ فونٹ سائز ٹائپ کیجیے جس کے نسبت وہ ہے، اور فارمولا em = px ÷ base استعمال کرتے ہوئے فوراً نتیجہ پڑھیے۔ تبدیلی اس فونٹ سائز کے مقابلے میں تناسب رکھتی ہے جو وہاں نافذ ہے جہاں قدر استعمال ہو رہی ہے۔ وہ صفحے کے لیے ایک واحد جواب نہیں دے سکتی: em خود عنصر کے فونٹ سائز کے نسبت ہے، یا font-size کے لیے والد کے، اس لیے وہی 1.5 em ایک 16 px کے عنصر کے اندر 24 px ہے اور 24 px کے عنصر کے اندر 36 px، اور em کے اندر em ضرب دیتا ہے۔ ایک ایسے عدد کے لیے جو ہر جگہ قائم رہے rem استعمال کیجیے۔ کچھ اپ لوڈ نہیں ہوتا۔