یہ ٹول کیا کرتا ہے
یہ ٹول pixel (px) اقدار کو root em (rem) اور em میں تبدیل کرتا ہے، اور اس کے برعکس بھی۔ آپ تینوں یونٹس میں سے کسی ایک میں کوئی بھی قدر درج کر سکتے ہیں، اور ٹول خود بخود باقی دو یونٹس میں مساوی قدریں شمار کر کے دکھا دیتا ہے۔ اس کے ساتھ آپ اپنی مرضی کا روٹ فونٹ سائز اور em سیاق و سباق کا فونٹ سائز بھی سیٹ کر سکتے ہیں، تاکہ تبدیلیاں آپ کے مخصوص ڈیزائن کی ضروریات کے مطابق درست بیٹھیں۔
یہ ٹول ان لوگوں کے کام آتا ہے جنہیں مقررہ px قدروں کو responsive ڈیزائن کے لیے rem یا em جیسی relative اکائیوں میں تبدیل کرنا ہو، جو یہ سمجھنا چاہتے ہوں کہ مختلف روٹ فونٹ سائز rem قدروں پر کیا اثر ڈالتے ہیں، جنہیں کسی مخصوص عنصر کے فونٹ سائز کی بنیاد پر em قدریں نکالنی ہوں، یا جو یہ یقینی بنانا چاہتے ہوں کہ قاری اپنا ڈیفالٹ فونٹ سائز بدلے تو ان کی سائزنگ درست طریقے سے اسکیل ہو۔
px، rem اور em میں کیا فرق ہے
تینوں یونٹس ایک ہی لمبائی کو مختلف طریقوں سے ناپتے ہیں۔ px کی قدر ہمیشہ ایک جیسی رہتی ہے، چاہے فونٹ سائز کچھ بھی ہو۔ rem کا حساب صفحے کے روٹ فونٹ سائز سے لگایا جاتا ہے — اگر روٹ 16px ہو تو 1rem بھی 16px کے برابر ہوگا۔ em کا حساب اس عنصر کے اپنے فونٹ سائز سے لگایا جاتا ہے جس میں وہ استعمال ہو رہا ہو۔
چونکہ اس ٹول میں روٹ فونٹ سائز اور em سیاق و سباق دونوں کا ڈیفالٹ 16px ہے، اس لیے شروع میں 16px، 1rem اور 1em تینوں برابر ہوتے ہیں۔ اگر آپ اسی 16px بنیاد پر 32px درج کریں تو یہ 2rem بنے گا (32 ÷ 16 = 2)، کیونکہ rem کی قدر ہمیشہ روٹ فونٹ سائز کے تناسب سے نکلتی ہے۔
روٹ فونٹ سائز کیسے کام کرتا ہے
"روٹ فونٹ سائز (px)" والی فیلڈ وہ بنیادی نمبر رکھتی ہے جس سے تمام rem قدریں اخذ ہوتی ہیں، اور اس کا ڈیفالٹ 16px ہے۔ یہ فیلڈ صرف ایسا نمبر قبول کرتی ہے جو 0 سے بڑا ہو؛ ورنہ ٹول یہ پیغام دکھاتا ہے: "روٹ فونٹ سائز 0 سے بڑا نمبر ہونا چاہیے۔"
اگر آپ کے پراجیکٹ کا روٹ فونٹ سائز 16px سے مختلف طے کیا گیا ہو، تو یہ فیلڈ اسی نمبر پر سیٹ کر دیں — ہر rem قدر فوری طور پر نئے حساب سے اپ ڈیٹ ہو جائے گی۔ نیچے دی گئی ٹیبل ہمیشہ عام 16px روٹ کی بنیاد پر ہی دکھائی جاتی ہے، اس لیے اگر آپ کا روٹ اس سے مختلف ہے تو اپنی قدر خود اس فیلڈ میں درج کر کے دیکھیں۔
em سیاق و سباق کا فونٹ سائز
em ہمیشہ صفحے کے روٹ سے نہیں بلکہ اس عنصر کے اپنے فونٹ سائز سے ناپا جاتا ہے جس میں وہ موجود ہو، اور یہ سائز مختلف عناصر میں مختلف ہو سکتا ہے۔ اسی وجہ سے یہ ٹول ایک علیحدہ "em سیاق و سباق کا فونٹ سائز (px)" فیلڈ دیتا ہے، جس کا ڈیفالٹ بھی 16px ہے۔
درست em حاصل کرنے کے لیے یہ فیلڈ اس مخصوص عنصر کے فونٹ سائز پر سیٹ کریں جس کا آپ حساب لگا رہے ہیں؛ اگر وہ عنصر روٹ ہی کے فونٹ سائز پر ہے تو دونوں فیلڈز کو برابر رکھیں۔ یہ فیلڈ بھی 0 سے بڑا نمبر مانگتی ہے، ورنہ پیغام آتا ہے: "em سیاق و سباق کا فونٹ سائز 0 سے بڑا نمبر ہونا چاہیے۔"
قدریں درج کریں اور نتائج دیکھیں
"اقدار (Values)" کے نیچے دی گئی فیلڈ میں کوئی بھی px، rem یا em ویلیو درج کریں — جیسے ہی آپ ٹائپ کرتے ہیں، باقی دونوں یونٹس اپ ڈیٹ ہو جاتے ہیں۔ px، rem یا em میں سے جس فیلڈ میں بھی ترمیم کریں، باقی دو خود بخود نئے حساب سے بدل جاتی ہیں۔ ٹول منفی px قدریں بھی قبول کرتا ہے، اس لیے negative margins یا offsets کا حساب لگانا بھی ممکن ہے۔
اگر آپ ایسی ویلیو درج کریں جو نمبر نہ ہو، تو ٹول یہ پیغام دکھاتا ہے: "تبدیل کرنے کے لیے ایک نمبر درج کریں۔" جب قدر درست ہو اور تبدیلی مکمل ہو جائے تو ٹول بتاتا ہے کہ تینوں یونٹس میں تبدیل کر دیا گیا۔
عام px ← rem ٹیبل اور پرائیویسی
"عام px ← rem (16px بیس)" ٹیبل 16px روٹ فونٹ سائز کی بنیاد پر عام استعمال ہونے والی px قدروں کو ان کی متعلقہ rem قدروں کے ساتھ دکھاتی ہے۔ مثال کے طور پر، اسی 16px روٹ پر 24px کو rem میں بدلیں تو یہ 1.5rem بنتا ہے (24 ÷ 16 = 1.5)۔ یہ ٹیبل ایسے وقت مفید ہے جب آپ کو بار بار کوئی نئی قدر ٹائپ کیے بغیر عام px سائزوں کا فوری اندازہ چاہیے ہو۔
ہر تبدیلی آپ کے براؤزر میں ہوتی ہے۔ آپ کی ٹائپ کردہ کوئی بھی چیز BroBroGo پر اپ لوڈ نہیں کی جاتی۔
اکثر پوچھے گئے سوالات
px، rem اور em میں کیا فرق ہے؟ px ایک مقررہ لمبائی ہے۔ rem کی پیمائش صفحہ کے روٹ فونٹ سائز کے مطابق کی جاتی ہے، لہذا 16px روٹ پر، 1rem برابر 16px ہوتا ہے۔ em کی پیمائش اس عنصر کے فونٹ سائز کے مطابق کی جاتی ہے جس میں یہ موجود ہوتا ہے۔ rem میں سائز اور فاصلے سیٹ کرنے سے قاری کے ڈیفالٹ فونٹ سائز تبدیل کرنے پر سب کچھ خود بخود اسکیل ہو جاتا ہے۔
الگ em سیاق و سباق (context) کا سائز کیوں ہے؟ em اپنے ہی عنصر کے فونٹ سائز کے تناسب سے ہوتا ہے، جو ہمیشہ روٹ نہیں ہوتا۔ em کو درست طریقے سے پڑھنے کے لیے em سیاق و سباق کو اس عنصر کے فونٹ سائز پر سیٹ کریں، اور دونوں کے مماثل ہونے پر اسے روٹ کے برابر رکھیں۔
اگر میرا روٹ فونٹ سائز 16px نہ ہو تو کیا ہوگا؟ اپنے CSS کے مطابق روٹ فونٹ سائز کی فیلڈ کو تبدیل کریں اور ہر rem ویلیو فوراً اپ ڈیٹ ہو جائے گی۔ نیچے دی گئی فوری ٹیبل عام 16px روٹ کے لیے ایک آسان گائیڈ ہے جس سے زیادہ تر سائٹس شروع ہوتی ہیں۔