rem کو px میں بدلنا Root em ↔ Pixels مفت آن لائن محفوظ
rem میں کوئی قدر لکھیں اور اسی جگہ px میں پڑھ لیں۔ حساب آپ کے براؤزر میں ہوتا ہے، کہیں کچھ نہیں بھیجا جاتا، اور جواب کس پر منحصر ہے وہ فرض نہیں کیا جاتا بلکہ نیچے لکھا ہے۔
کچھ بھی اپ لوڈ نہیں
عام سائز — rem کو px میں بدلنا
| rem | px |
|---|---|
| 0.5 | 8 |
| 0.75 | 12 |
| 1 | 16 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
| 2.5 | 40 |
| 3 | 48 |
| 4 | 64 |
یہ اکائیاں کہاں سے آئیں
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، یہاں تک کہ صفحے کے نیچے کا متن مطلوبہ جسامت سے دُگنا ہو جاتا ہے۔
کیا جواب بالکل درست ہے؟
جہاں دونوں اکائیاں ایک دوسرے سے صحیح اعداد میں متعین ہوں، وہاں ہاں — صفحہ یہ بات عدد کے اوپر کہتا ہے، اور واحد گولائی اس میں ہے کہ کتنے ہندسے دکھائے جائیں۔ جہاں نسبت کا اعشاریہ ختم نہ ہوتا ہو، صفحہ بارہ بامعنی ہندسے دکھاتا ہے اور کہتا ہے کہ تعلق تقریبی ہے، بجائے اس کے کہ کچھ اور ظاہر کرے۔
جو میں لکھتا ہوں وہ میرے آلے سے باہر جاتا ہے؟
نہیں۔ حساب آپ ہی کے براؤزر میں ہوتا ہے؛ کچھ اپ لوڈ نہیں ہوتا، اور نہ ہی کوئی سرور ہے جہاں ہو۔ صفحہ ایک بار کھل جائے تو نیٹ ورک بند ہونے پر بھی چلتا ہے۔
آپ کو rem کو px میں کیوں تبدیل کرنا پڑتا ہے
آپ اسٹائل شیٹ کھولتے ہیں اور کارڈ پر padding: 2.25rem اور کیپشن پر font-size: 0.8125rem دیکھتے ہیں۔ یہ اچھی قدریں ہیں، جیسے جدید CSS لکھی جانی چاہیے، اور پہلی نظر میں یہ آپ کو کچھ نہیں بتاتیں۔ اسکرین پر کارڈ کی وہ پیڈنگ کتنی بڑی ہے؟ کیا کیپشن پڑھنے لائق ہوگا؟ کیا یہ ڈیزائن فائل کے 36 px اور 13 px سے ملتا ہے جو آپ کو تھمائی گئی تھی؟ جواب کے لیے آپ rem کو px میں تبدیل کرتے ہیں: آپ روٹ فونٹ سائز سے ضرب دیتے ہیں اور جواب اس اکائی میں پڑھتے ہیں جو ڈیزائن کے اوزار استعمال کرتے ہیں۔ یہ معمول کی سمت کا الٹ ہے، اور یہ وہ ہے جو آپ کوڈ پڑھتے وقت، ماڈل کا بِلڈ سے موازنہ کرتے وقت یا ایسے شخص کو ترتیب سمجھاتے وقت کرتے ہیں جو پکسل میں سوچتا ہے۔
تبدیلی آسان ہے؛ جو اسے ایک صفحے کے لائق بناتا ہے وہ بنیاد ہے۔ rem کوئی سائز نہیں، یہ ایک سائز کا ضعف ہے، روٹ عنصر کا فونٹ سائز۔ ایسے براؤزر میں جسے کسی نے کچھ اور نہ بتایا ہو وہ سائز 16 px ہے، اس لیے 1 rem ہے 16 px، 2.25 rem ہے 36 px اور 0.8125 rem ہے 13 px۔ لیکن روٹ کو اسٹائل شیٹ بدل سکتی ہے، اور قاری اسے براؤزر میں بدل سکتا ہے، اور پھر صفحے کی ہر rem قدر اس کے ساتھ ہلتی ہے۔ اس لیے صفحہ بنیاد مانگتا ہے اور اسے استعمال کرتا ہے، چھپانے کے بجائے۔
حساب آپ کے براؤزر میں ہوتا ہے، اور کچھ اپ لوڈ نہیں ہوتا۔ نیچے آپ کو فارمولا، عام قدروں کا جدول، تبدیلی کیا رکھتی ہے اور کیا نہیں رکھ سکتی، وہ صورتیں جن میں ڈویلپرز کو rem کو px میں تبدیل کرنا پڑتا ہے، اور چند عادتیں ملیں گی جو rem پر مبنی اسٹائل شیٹ کو پڑھنے میں آسان رکھتی ہیں۔
فارمولا اور بنیاد
px برابر ہے rem ضرب بنیاد
فارمولا ایک ضرب ہے: px = rem × base۔ 16 px کی معمول کی بنیاد کے ساتھ، 1.5 rem بن جاتا ہے 24 px، 0.75 rem بن جاتا ہے 12 px اور 4 rem بن جاتا ہے 64 px۔ صفحہ نتیجے کے ساتھ بنیاد چھاپتا ہے، اس لیے 1.5 rem = 24 px (16 px) جیسی سطر بتاتی ہے کہ کیا فرض کیا گیا اور آپ فوراً دیکھ سکتے ہیں کہ وہ آپ کے منصوبے سے ملتا ہے یا نہیں۔
اپنی بنیاد معلوم کرنا
اسٹائل شیٹ میں html یا :root پر ایسا اصول ڈھونڈیے جو font-size مقرر کرے۔ اگر کوئی نہیں تو بنیاد براؤزر کا ڈیفالٹ 16 px ہے۔ اگر ہے، جیسے 62.5%، تو 16 کا وہ فیصد لیجیے: 62.5% سے 10 px ملتا ہے۔ براؤزر کے ڈویلپر ٹولز میں آپ روٹ عنصر منتخب کر کے اس کا حساب شدہ فونٹ سائز بھی پڑھ سکتے ہیں، جو بنیاد کے خانے میں ٹائپ کرنے کا عدد ہے۔
جب روٹ سائز بہتا ہو
کچھ سائٹیں clamp عبارت استعمال کر کے روٹ سائز کو ونڈو کے ساتھ بڑھاتی ہیں۔ تب 1 rem کی کوئی ایک پکسل قدر ہی نہیں: یہ فون پر 15 px ہے اور چوڑے مانیٹر پر 18 px۔ اس صورت میں ہر تبدیلی ایک سنیپ شاٹ ہے۔ وہ بنیاد ٹائپ کیجیے جو آپ کو اس چوڑائی پر نظر آئے جس کی آپ کو فکر ہے، اور سمجھیے کہ جواب صرف اسی چوڑائی پر درست ہے۔
تبدیلی کیا رکھتی ہے اور کیا نہیں رکھ سکتی
یہ تناسب رکھتی ہے
ایک rem وہ ہے جو روٹ فونٹ سائز ہو، اس لیے rem میں لکھی ترتیب اپنی شکل برقرار رکھتی ہے جب وہ سائز بدلے۔ جب آپ rem کو px میں تبدیل کرتے ہیں تو پکسل کی قدر وہی تناسب ہے جو ایک خاص بنیاد کے لیے ٹھوس بنا دیا گیا۔ دو سائزوں کا تناسب، مثلاً 2 rem کے عنوان کا 1 rem کے باڈی ٹیکسٹ پر، نہیں بدلتا چاہے آپ اسے کیسے ہی تبدیل کریں، اور وہی تناسب ہے جس پر اچھی ترتیب منحصر ہے۔
یہ آپ کے قاری کی ترتیبات نہیں جان سکتی
عدد مکمل طور پر بنیاد پر منحصر ہے۔ اگر قاری نے اپنے براؤزر کا ڈیفالٹ متن کا سائز بڑھایا ہے، جو بہت سے لوگ کرتے ہیں اور انہیں حق ہے، تو ان کے لیے 1 rem کا مطلب 16 px نہیں، اور جو عدد آپ دیکھتے ہیں وہ صرف خانے میں موجود بنیاد کے لیے درست ہے۔ پکسل کی قدر کو ڈیزائن سمجھنے کا ذریعہ سمجھیے، اس بات کا وعدہ نہیں کہ ہر وزیٹر کیا دیکھے گا۔
گولائی
چونکہ بنیاد عموماً پورا عدد ہوتی ہے، ضرب کا نتیجہ عموماً قطعی ہوتا ہے۔ 0.8125 rem ٹھیک 13 px ہے 16 کی بنیاد پر؛ 0.6875 rem ٹھیک 11 px ہے۔ اگر آپ کو لمبا اعشاریہ ملے تو یہ علامت ہے کہ rem کی قدر اس سے مختلف بنیاد سے نکالی گئی تھی جو آپ نے ٹائپ کی۔
عام قدریں
صفحے کے نچلے حصے میں جدول
صفحے میں پکسل قدروں کا جدول ہے جن کے مطابق عام rem کے اعداد آپ کی مقرر کردہ بنیاد پر آتے ہیں: 0.5 rem ہے 8 px، 0.625 ہے 10، 0.75 ہے 12، 0.875 ہے 14، 1 ہے 16، 1.125 ہے 18، 1.25 ہے 20، 1.5 ہے 24، 2 ہے 32، 3 ہے 48 اور 4 ہے 64۔ یہ وہ قدریں ہیں جو جگہ اور ٹائپ کے پیمانوں میں سب سے زیادہ سامنے آتی ہیں، اور انہیں زبانی جاننا اسٹائل شیٹ کو ایک نظر میں پڑھنے لائق بنا دیتا ہے۔
اسٹائل شیٹ کو پکسل میں پڑھنا
مفید مشق یہ ہے کہ ایسی اسٹائل شیٹ لیجیے جو آپ نے نہیں لکھی اور اس کی بنیادی قدروں کو ایک بار پکسل میں ترجمہ کر کے نتائج نوٹ میں لکھ لیجیے۔ باڈی سائز 1 rem، عنوان 1.5 اور 2.25 rem، کنٹینر کا فاصلہ 2 rem: پکسل میں، 16، 24، 36 اور 32۔ اس طرح دیکھنے پر ڈیزائن کی منطق ظاہر ہوتی ہے، اور آپ کیلکولیٹر کے بغیر اس کا ڈیزائن فائل سے موازنہ کر سکتے ہیں۔
یہاں rem کو px میں کیسے تبدیل کریں
rem کی قدر ٹائپ کیجیے
پہلے خانے میں rem میں سائز درج کیجیے۔ اعشاریے قبول ہیں، اس لیے 0.8125 اتنا ہی کام کرتا ہے جتنا 1۔
بنیاد مقرر کیجیے
اگر آپ کا CSS روٹ سائز نہیں بدلتا تو اسے 16 پر رہنے دیجیے۔ اگر بدلتا ہے تو بدلیے۔ آپ کے ٹائپ کرتے ہی نتیجہ اپ ڈیٹ ہوتا ہے۔
پکسل کی قدر پڑھیے
جواب فوراً ظاہر ہوتا ہے، بنیاد کے ساتھ جو اس کے برابر دکھائی جاتی ہے، تاکہ آپ بتا سکیں کہ کیا فرض کیا گیا۔ اسے اپنے نوٹوں میں نقل کیجیے یا ڈیزائن فائل سے موازنہ کیجیے۔
یہ اکائیاں کہاں سے آتی ہیں
CSS پکسل
جب ڈسپلے کی کثافت قابلِ پیش گوئی نہ رہی تو حقیقی پکسل میں ناپا ہوا صفحہ ایسا صفحہ بن گیا جو اسکرینیں تیز ہونے کے ساتھ سکڑتا تھا۔ اس لیے CSS پکسل کو حوالہ لمبائی کے طور پر دوبارہ متعین کیا گیا: آرام دہ پڑھنے کے فاصلے سے دیکھے جانے والے ایک انچ کا تقریباً 1/96۔ اس لیے اسٹائل شیٹ کا پکسل آپ کی اسکرین پر نقطہ نہیں بلکہ لمبائی کی اکائی ہے جسے براؤزر اتنے نقطوں سے جوڑتا ہے جتنے اسکرین کو چاہییں۔
rem
em ویب سے پرانا ہے: دھاتی ٹائپ میں یہ ڈھلے ہوئے بلاک کی چوڑائی تھی، جس کا نام بڑے M پر رکھا گیا، اور CSS میں اس کا مطلب نافذ فونٹ سائز ہے، اسی لیے یہ بدلتا ہے جب آپ عناصر کو تہہ در تہہ رکھتے ہیں۔ rem اسی سے بچنے کے لیے شامل کیا گیا: یہ روٹ عنصر کا em ہے اور کبھی ضرب در ضرب نہیں بڑھتا۔ فرق کو اعداد میں دیکھنے کے لیے px کو em میں تبدیل کیجیے اور اس کا اس سے موازنہ کیجیے جو rem کو px میں تبدیل کرنے پر ملتا ہے۔
ڈویلپر rem کو px میں کب تبدیل کرتے ہیں
بِلڈ کو ڈیزائن فائل سے جانچنا
ڈیزائنر پکسل میں فائل دیتا ہے؛ ڈویلپر نے کوڈ rem میں لکھا۔ یہ جانچنے کے لیے کہ صفحہ ملتا ہے، وہ rem کو px میں تبدیل کرتے ہیں اور اعداد کا موازنہ کرتے ہیں۔ فرق فوراً ظاہر ہو جاتا ہے: 1.375 rem ہے 22 px، اور اگر ڈیزائن کہتا ہے 24 تو ان میں سے ایک غلط ہے۔
اجنبی کوڈ پڑھنا
جب آپ کو اسٹائل شیٹ وراثت میں ملے تو rem کی قدریں حقیقی سائز چھپاتی ہیں۔ ان میں سے مٹھی بھر اہم کو تبدیل کرنا آپ کو ڈیزائن کا نقشہ دیتا ہے: ٹائپ کتنا بڑا ہے، گٹر کتنے چوڑے ہیں، بریک پوائنٹ کہاں پڑتے ہیں۔
بگ رپورٹیں اور دستاویزات لکھنا
صفحہ جانچنے والے جو دیکھتے ہیں پکسل میں بیان کرتے ہیں۔ جو ڈویلپر کہتا ہے کہ پیڈنگ 2.5 rem ہے وہ ٹیسٹر کے لیے کم معنی رکھتا ہے؛ 40 px کچھ معنی رکھتا ہے۔ تبدیلی دونوں فریقوں کو ایک دوسرے کو سمجھنے دیتی ہے۔
وہ قدریں مقرر کرنا جنہیں پکسل میں قطعی ہونا ہے
کچھ چیزوں کو ڈیوائس پکسل کی قطعی تعداد ہونا پڑتا ہے ورنہ وہ دھندلی لگتی ہیں: ایک پکسل کی حد، 24 px گرڈ پر بنا آئیکن۔ اگر کسی سائز کو پکسل گرڈ پر اترنا ہے تو rem کو px میں تبدیل کرنا بتاتا ہے کہ آپ کی بنیاد پر ایسا ہوتا ہے یا نہیں۔
rem کو px میں تبدیل کرتے وقت پھندے
بدلا ہوا روٹ سائز بھول جانا
اگر روٹ 62.5% پر یا clamp عبارت پر مقرر ہے تو 16 کا معیاری مستقل لاگو نہیں ہوتا۔ نتیجہ دونوں بنیادوں کے تناسب سے غلط ہوتا ہے۔ ہمیشہ پہلے بنیاد جانچیے۔
rem کو em سے الجھانا
em عنصر کے اپنے فونٹ سائز کے نسبت ہے، روٹ کے نہیں۔ 24 px کے عنوان کے اندر 1.5em کی قدر 36 px ہے، لیکن 16 px کے پیراگراف کے اندر 24 px۔ یہ صفحہ rem تبدیل کرتا ہے، جس میں ایسا ابہام نہیں۔ em کے لیے em کو px میں دیکھیے۔
یہ فرض کرنا کہ اسکرین وہی پکسل دکھاتی ہے
CSS پکسل ڈیوائس پکسل نہیں ہے۔ زیادہ کثافت والے ڈسپلے پر ایک CSS پکسل دو یا تین ڈیوائس پکسل ہو سکتا ہے۔ تبدیلی CSS پکسل دیتی ہے، جو ڈیزائن کے اوزار اور اسٹائل شیٹ دونوں استعمال کرتے ہیں۔
بہت جلدی گول کرنا
اگر آپ 13.333 px کو 13 تک گول کریں اور پھر واپس تبدیل کریں تو آپ کو 0.8125 rem ملتا ہے، نہ کہ وہ 0.8333 جس سے آپ نے شروع کیا تھا۔ جب اہم ہو تو اصل rem قدر رکھیے۔
تبدیل کرنے سے پہلے لوگ کیا پوچھتے ہیں
1 rem کتنے پکسل ہے؟
سولہ، ایسے براؤزر میں جس کا ڈیفالٹ نہیں بدلا گیا۔
2 rem کتنے پکسل ہے؟
ڈیفالٹ بنیاد پر بتیس۔ 10 کی بنیاد پر یہ 20 ہوتا۔
میرا براؤزر مختلف کیوں دکھا رہا ہے؟
قاری کی ترتیب یا اسٹائل شیٹ کے کسی اصول نے روٹ سائز بدل دیا ہے۔ ڈویلپر ٹولز میں روٹ عنصر کا حساب شدہ فونٹ سائز دیکھیے۔
کیا rem اور em ایک ہی ہیں؟
نہیں۔ rem روٹ عنصر کا حوالہ دیتا ہے اور em خود عنصر کا۔
کیا میرا عدد اپ لوڈ ہوتا ہے؟
نہیں۔ حساب آپ کے براؤزر میں چلتا ہے اور کچھ کہیں نہیں بھیجا جاتا۔
میں واپس کیسے جاؤں؟
px کو rem میں کے ذریعے، جو ضرب دینے کے بجائے تقسیم کرتا ہے۔
وہ عادتیں جو rem کی اسٹائل شیٹ کو پڑھنے میں آسان بناتی ہیں
پکسل کی قدر تبصرے میں لکھیے
gap: 1.5rem; /* 24px */ جیسی سطر چند حروف کی قیمت پر اگلے قاری کو ایک تبدیلی سے بچاتی ہے۔ یہ بھی ریکارڈ کرتی ہے کہ آپ نے کون سی بنیاد فرض کی۔
چھوٹا پیمانہ استعمال کیجیے
جو منصوبہ rem کی صرف مٹھی بھر قدریں استعمال کرتا ہے، جیسے 0.5، 1، 1.5، 2 اور 3، اسے سیکھنا آسان ہے: ایک دن بعد آپ انہیں سوچے بغیر پکسل میں جانتے ہیں۔ جب آپ ایسی اسٹائل شیٹ کے لیے rem کو px میں تبدیل کرتے ہیں تو آپ صرف وہ تصدیق کر رہے ہوتے ہیں جو آپ کو یاد ہے۔
اپنی قدروں کو نام دیجیے
--space-md: 1.5rem جیسی کسٹم خصوصیات کے ساتھ اسٹائل شیٹ اعداد کے بجائے ارادہ بیان کرتی ہے۔ نام معنی لیے ہوتا ہے، اور عدد ایک جگہ بیٹھا ہوتا ہے۔
مختلف ڈیفالٹ سائز کے ساتھ آزمائیے
اپنے براؤزر میں ڈیفالٹ متن کا سائز بڑھائیے اور صفحہ دیکھیے۔ اگر وہ جڑا رہے تو ترتیب واقعی rem میں بنی ہے۔ اگر ٹوٹ جائے تو کوئی چیز پکسل میں رہ گئی تھی۔
rem کو px میں تبدیل کرنے کے بعد پکسل کی قدر کا اچھا استعمال
صرف اعداد نہیں، تناسب کا موازنہ کیجیے
جب آپ پوری اسٹائل شیٹ کے لیے rem کو px میں تبدیل کریں تو سائزوں کے ساتھ ان کے درمیان کے تناسب بھی دیکھیے۔ ٹائپ کا ایسا پیمانہ جس میں ہر قدم پچھلے سے تقریباً 1.25 گنا ہو 16، 20، 25، 31 اور 39 پکسل دیتا ہے؛ 1.5 کا پیمانہ 16، 24، 36 اور 54 دیتا ہے۔ تناسب کو پہچاننا بتاتا ہے کہ ڈیزائنر کا ارادہ کیا تھا، اور جب آپ کو نیا سائز چاہیے ہو تو پیمانے کو یکساں طور پر بڑھانے دیتا ہے۔
پکسل میں سوچنے والوں کے لیے ترجمہ کیجیے
ٹیم میں ہر کوئی rem نہیں پڑھتا۔ پروجیکٹ منیجر، کاپی رائٹر اور کلائنٹ اکثر اسکرین شاٹس سے کام کرتے ہیں اور عنوان کو ذرا بڑا کرنے کو کہتے ہیں۔ اگر آپ کہہ سکیں کہ عنوان اب 36 px ہے اور 2.5 rem پر 40 px ہوتا تو گفتگو مختصر ہو جاتی ہے۔ صفحہ دونوں ذخیرۂ الفاظ کے درمیان تیز پل کے طور پر مفید ہے۔
ٹچ ہدف اور کم از کم سائز جانچیے
ٹچ اسکرین کی ہدایات کم از کم تقریباً 44 px کے ہدف مانگتی ہیں، اور متن کی ہدایات تقریباً 16 px یا اس سے زیادہ کی باڈی کاپی۔ دونوں پکسل میں بیان ہوتی ہیں۔ rem میں لکھی اسٹائل شیٹ کو ان کے مقابل جانچنے کے لیے rem کو px میں تبدیل کیجیے اور دیکھیے کہ بٹن اور متن لکیر پار کرتے ہیں یا نہیں۔
زوم کی صورت کا خیال رکھیے
جو قدر آپ کو ملتی ہے وہ اس بنیاد کے لیے ہے جو آپ نے ٹائپ کی۔ اگر آپ کے قارئین متن بڑا کر سکتے ہیں تو 20 یا 24 کی بنیاد کے ساتھ تبدیلی دوبارہ آزمائیے اور دیکھیے کہ ترتیب اسکرین سے کیا مانگتی ہے۔ 16 پر آرام دہ کارڈ 24 پر بہہ سکتا ہے، اور معلوم کرنے کا بہترین وقت صفحہ شائع ہونے سے پہلے ہے۔
متعلقہ کنورٹر
اوزاروں کا یہی خاندان ملتی جلتی تبدیلیوں کا احاطہ کرتا ہے۔ واپس rem کی طرف جانے کے لیے px کو rem میں استعمال کیجیے۔ عنصر کے نسبت سائز کے لیے px کو em میں اور em کو px میں ہیں، اور اسکرین کے نسبت سائز کے لیے px کو vw میں اور vw کو px میں۔ اسی اسٹائل شیٹ کے رنگوں کے لیے HEX کو RGB میں اور HSL کو HEX میں ہاتھ میں ہیں، اور کلاس کے ناموں کے لیے متن کو kebab-case میں جملے کو ایسے نام میں بدلتا ہے جسے CSS قبول کرتی ہے۔
ایک حل شدہ مثال
فرض کیجیے آپ پل ریکوئسٹ کا جائزہ لے رہے ہیں اور اسٹائل شیٹ میں ہیرو سیکشن padding: 5rem 1.5rem کے ساتھ ہے، عنوان 3.5rem اور لیڈ پیراگراف 1.25rem۔ ڈیزائن فائل کہتی ہے 80 px اور 24 px پیڈنگ، 56 px کا عنوان اور 20 px کا لیڈ۔ آپ 5 ٹائپ کر کے 80 px پڑھتے ہیں، 1.5 ٹائپ کر کے 24 پڑھتے ہیں، 3.5 ٹائپ کر کے 56 پڑھتے ہیں، 1.25 ٹائپ کر کے 20 پڑھتے ہیں۔ چاروں ملتے ہیں، اس لیے بِلڈ وفادار ہے۔ اگر عنوان 3.25 rem ہوتا تو آپ 52 پڑھتے اور فرق ڈیزائنر تک پہنچنے سے پہلے پکڑ لیتے۔
ایک مختصر چیک لسٹ
تبدیل کرنے سے پہلے
بنیاد ڈھونڈیے: اسٹائل شیٹ میں روٹ کا اصول، یا ڈویلپر ٹولز میں حساب شدہ سائز۔
تبدیل کرتے وقت
rem کی قدر ٹائپ کیجیے، نتیجے کے ساتھ دکھائی گئی بنیاد جانچیے اور پکسل کا عدد نوٹ کیجیے۔
تبدیل کرنے کے بعد
ڈیزائن فائل سے موازنہ کیجیے۔ اگر اعداد مختلف ہوں تو کوڈ پر شک کرنے سے پہلے بنیاد جانچیے۔
عام غلطیاں
جانچے بغیر 16 استعمال کرنا
یہ ڈیفالٹ ہے، اصول نہیں۔ روٹ جانچیے۔
پکسل کو حتمی سمجھنا
جواب ایک بنیاد کے لیے ہے۔ بڑے ڈیفالٹ والا قاری بڑے پکسل دیکھتا ہے۔
rem اور em کو ملانا
وہ ایک جیسے لگتے ہیں اور مختلف برتاؤ کرتے ہیں۔ ہر ایک کے لیے صحیح صفحہ استعمال کیجیے۔
آپ کے اعداد آپ کے آلے پر رہتے ہیں
حساب مقامی طور پر ہوتا ہے۔ آپ کی قدریں آپ کا اپنا براؤزر استعمال کرتا ہے اور کچھ کہیں نہیں بھیجا جاتا۔ بعد میں حذف کرنے کو کچھ نہیں اور بنانے کو کوئی اکاؤنٹ نہیں۔ rem کو px میں تبدیل کرنے کا یہی سادہ طریقہ ہے۔
خلاصہ
یہاں rem کو px میں تبدیل کرنے کے لیے rem میں سائز ٹائپ کیجیے اور فوراً پکسل میں پڑھیے، فارمولا px = rem × base استعمال کرتے ہوئے۔ بنیاد 16 px سے شروع ہوتی ہے، براؤزر کا ڈیفالٹ، اور آپ اسے اپنے CSS سے ملانے کے لیے بدل سکتے ہیں۔ تبدیلی تناسب رکھتی ہے، کیونکہ ایک rem وہ ہے جو روٹ فونٹ سائز ہو، اور وہ آپ کے قاری کی ترتیبات نہیں جان سکتی، اس لیے عدد صرف خانے میں موجود بنیاد کے لیے درست ہے۔ عام قدروں کا جدول، 8 px پر 0.5 rem سے 64 px پر 4 rem تک، اسٹائل شیٹ کو ایک نظر میں پڑھنے میں مدد دیتا ہے۔ کچھ اپ لوڈ نہیں ہوتا۔