مواد پر جائیں
🛠️
Whiz Tools

پکسل سے REM اور EM میں تبدیلی – مفت CSS یونٹ کیلکولیٹر

فوری طور پر پکسل کو REM اور EM یونٹوں میں تبدیل کریں۔ ریسپانسو ویب ڈیزائن کے لیے مفت CSS یونٹ کنورٹر۔ مخصوص فونٹ سائز اور درست نتائج کے لیے حقیقی وقت کی گنتی کی حمایت کرتا ہے۔

پی ایکس، آر ای ایم اور ای ایم یونٹ کنورٹر

پکسلز (پی ایکس)، روٹ ای ایم (آر ای ایم) اور ای ایم (ای ایم) یونٹس کے درمیان تبدیلی کریں۔ مساوی قدروں کو دیکھنے کے لیے کسی بھی فیلڈ میں ایک قدر درج کریں۔

px
px
px
rem
em
منفی یا صفر قدروں کے لیے بصری مظہر دستیاب نہیں ہے

تبدیلی فارمولے

  • پی ایکس سے آر ای ایم: روٹ فونٹ سائز میں پی ایکس قدر کی تقسیم
  • پی ایکس سے ای ایم: والدین فونٹ سائز میں پی ایکس قدر کی تقسیم
  • آر ای ایم سے پی ایکس: روٹ فونٹ سائز میں آر ای ایم قدر کی ضرب
  • ای ایم سے پی ایکس: والدین فونٹ سائز میں ای ایم قدر کی ضرب
لوڈنگ کیلکولیٹر...
📚

دستاویزات

پی ایکس، آر ای ایم اور ای ایم یونٹ کنورٹر: ضروری سی ایس ایس یونٹس کی وضاحت

کیوں CSS یونٹ کنورژن جدید ویب ڈویلپمنٹ کے لیے اہم ہے

جب آپ ریسپانسیو ویب سائٹس بنا رہے ہوتے ہیں، تو سب سے عام چیلنجوں میں سے ایک ڈیزائن کی تفصیلات کو لچکدار، اسکیلیبل CSS میں تبدیل کرنا ہے۔ آپ نے شاید فگما ڈیزائن میں "پیڈنگ: 24px" دیکھا ہو گا اور سوچا ہو گا کہ کیا اسے پکسلز میں رکھا جائے یا rem یونٹس میں تبدیل کیا جائے۔ یہ فیصلہ قابل رسائی سے لے کر اس بات تک کہ صارفین اپنے براؤزر کے فونٹ سائز کو کیسے ایڈجسٹ کرتے ہیں، سب کو متاثر کرتا ہے۔

یہ PX، REM، اور EM یونٹ کنورٹر آپ کو ان تین بنیادی CSS یونٹس کے درمیان تیزی سے تبدیلی کرنے میں مدد کرتا ہے۔ پکسلز آپ کو دقیق کنٹرول فراہم کرتے ہیں - بارڈرز اور باریک تفصیلات کے لیے بہترین۔ REM یونٹس روٹ فونٹ سائز کے ساتھ اسکیل ہوتے ہیں، جو انہیں پوری سائٹ میں مستقل جگہ اور ٹائپوگرافی کے لیے مثالی بناتا ہے۔ EM یونٹس اپنے والدین عنصر کے نسبت اسکیل ہوتے ہیں، جو خود پر مشتمل اجزاء کو تناسب برقرار رکھنے میں مدد کرتے ہیں۔

پیچیدہ حصہ؟ ان کے درمیان تبدیلی کرنے کے لیے فونٹ سائز کا حساب رکھنا ضروری ہے، جو آپ کے روٹ عنصر اور انفرادی اجزاء کے درمیان مختلف ہوتے ہیں۔ ایک عام غلطی جو میں ڈویلپرز میں دیکھتا ہوں وہ ہے ہر جگہ پکسلز کا استعمال کرنا کیونکہ یہ آسان لگتا ہے۔ اگرچہ یہ شروع میں کام کرتا ہے، لیکن یہ قابل رسائی کے مسائل پیدا کرتا ہے جب صارفین اپنے براؤزر کا ڈیفالٹ فونٹ سائز بڑھاتے ہیں - لے آؤٹ تناسب کے ساتھ ایڈجسٹ نہیں ہوتا۔

CSS وحدات کی فہم: پکسل، REM، اور EM

پکسل (PX) کیا ہیں؟

پکسل (PX) CSS کی سب سے سیدھی وحدت ہیں—جو آپ مخصوص کرتے ہیں وہی ملتا ہے۔ CSS پکسل ایک حوالہ وحدت ہے، ضروری نہیں کہ یہ فزیکل اسکرین پکسل ہو (خاص طور پر ہائی-DPI ڈسپلے جیسے ریٹینا اسکرین پر)۔ یہ مستحکم سائز فراہم کرتے ہیں جو فونٹ سائز یا والدین عناصر پر منحصر نہیں ہوتے۔

1.element {
2  width: 200px;
3  font-size: 16px;
4  margin: 10px;
5}
6

جب پکسل اچھے کام کرتے ہیں:

  • بارڈر اور ڈائیوائیڈر (1px یا 2px بارڈر صاف رہتے ہیں)
  • چھوٹی، درست تفصیلات جو اسکیل نہیں ہونی چاہئیں
  • مستحکم-چوڑائی کے کنٹینر جب آپ کو درست ابعاد چاہئیں
  • آئیکن سائز جب پکسل-درست اسپرائٹ شیٹس پر کام کر رہے ہوں

پکڑ: پکسل صارف کی ترجیحات کا احترام نہیں کرتے۔ اگر کوئی شخص بہتر قابل پڑھنے کے لیے اپنے براؤزر کے ڈیفالٹ فونٹ سائز کو 16px سے 20px تک بڑھاتا ہے، تو پکسل پر مبنی لے آؤٹ بدلتا نہیں، جس سے ممکنہ طور پر متن کنٹینر سے باہر نکل سکتا ہے یا تنگ جگہ بن سکتی ہے۔

REM وحدات کیا ہیں؟

REM (جڑ em) وحدات جڑ عنصر کے فونٹ سائز پر مبنی اسکیل ہوتی ہیں—عام طور پر <html> عنصر۔ زیادہ تر براؤزر 16px کو ڈیفالٹ مانتے ہیں، اس لیے 1rem 16px کے برابر ہے جب تک کہ آپ جڑ فونٹ سائز نہ بدلیں۔ یہاں وہ چیز ہے جو REMs کو طاقتور بناتی ہے: وہ آپ کی پوری سائٹ میں مستقل، قابل پیش بینی اسکیلنگ فراہم کرتے ہیں۔

1html {
2  font-size: 16px; /* زیادہ تر براؤزر میں ڈیفالٹ */
3}
4
5.element {
6  width: 12.5rem; /* ڈیفالٹ جڑ فونٹ سائز کے ساتھ 200px کے برابر */
7  font-size: 1rem; /* 16px کے برابر */
8  margin: 0.625rem; /* 10px کے برابر */
9}
10

کیوں ڈویلپرز REM وحدات کو ترجیح دیتے ہیں:

  • مستقل اسکیلنگ: جڑ فونٹ سائز کو تبدیل کریں، اور ہر چیز تناسب کے ساتھ اسکیل ہو جائے گی
  • رسائی کی تعمیل: جب صارف اپنے براؤزر کے فونٹ سائز کو ایڈجسٹ کرتے ہیں، تو REM پر مبنی لے آؤٹ خود بخود ڈھلتا ہے
  • آسان دیکھ بھال: ایک ہی جگہ پر اسپیسنگ کی قدریں اپ ڈیٹ کریں بجائے پکسل کی قدروں کو ڈھونڈنے کے
  • کوئی جمع ہونے والی مسائل نہیں: EM وحدات کے برعکس، REMs نیسٹڈ عناصر میں جمع نہیں ہوتے

تجربے سے پرو ٹپ: اپنا جڑ فونٹ سائز 62.5% پر سیٹ کریں (جو ڈیفالٹ 16px کے ساتھ 1rem = 10px بناتا ہے)۔ یہ ذہنی حساب کو آسان بناتا ہے—1.6rem = 16px، 2.4rem = 24px۔ بس یاد رکھیں کہ اپنا بॉڈی فونٹ سائز واپس 1.6rem پر سیٹ کریں تاکہ متن ڈیفالٹ طور پر 16px ہو۔ W3C CSS قدریں اور وحدات کی وضاحت کے مطابق، REM وحدات ہمیشہ جڑ عنصر کا حوالہ دیتی ہیں، جو انہیں پیچیدہ لے آؤٹ میں قابل پیش بینی بناتا ہے۔

EM وحدات کیا ہیں؟

EM وحدات اپنے والدین عنصر کے فونٹ سائز کے نسبت اسکیل ہوتی ہیں، جو انہیں سیاق کے مطابق بناتا ہے۔ یہ رویہ REM وحدات سے مختلف ہے، جو ہمیشہ جڑ کا حوالہ دیتی ہیں۔ "em" کا نام ٹائپوگرافی سے آیا ہے—یہ تاریخی طور پر کسی مخصوص ٹائپ فیس میں بڑے حرف "M" کی چوڑائی کو حوالہ دیتا تھا۔

1.parent {
2  font-size: 20px;
3}
4
5.child {
6  font-size: 0.8em; /* 16px کے برابر (20px × 0.8) */
7  margin: 0.5em; /* 8px کے برابر (16px × 0.5) */
8}
9

جب EM وحدات چمکتی ہیں:

  • کامپونینٹ پر مبنی ڈیزائن: فونٹ سائز کے ساتھ پیڈنگ اور مارجن
  • ٹائپوگرافی: لائن کی اونچائی بغیر وحدت کی قدروں یا ems کے اچھی طرح کام کرتی ہے (جیسے line-height: 1.5em)
  • خود-مکمل ماڈیول: بٹن یا کارڈ جو فونٹ سائز کی تبدیلی کے ساتھ تناسب برقرار رکھتے ہیں
  • میڈیا کویریز: MDN ویب ڈاکس کے مطابق، میڈیا کویریز میں EM وحدات براؤزر کے ڈیفالٹ فونٹ سائز کا حوالہ دیتی ہیں، والدین عنصر کا نہیں

جمع ہونے والی پھندا: یہاں وہ جگہ ہے جہاں ڈویلپر اکثر الجھ جاتے ہیں۔ EM وحدات نیسٹڈ عناصر کے ذریعے کیسڈ ہوتی ہیں، جو غیر متوقع نتائج پیدا کر سکتی ہیں:

1.level-1 { font-size: 1.2em; }  /* 16px ہونے پر 19.2px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

تین سطحوں کی نیسٹنگ کے بعد، آپ کا متن 20% کی بجائے 73% بڑھ گیا ہے۔ یہی وجہ ہے کہ بہت سے ڈویلپرز نے براؤزر سپورٹ بہتر ہونے پر ٹائپوگرافی کے لیے REM وحدات پر سوچ کیا۔

تبدیلی کے فارمولے اور حسابات

پی ایکس، آر ای ایم اور ای ایم یونٹس کے درمیان ریاضی تعلقات کو سمجھنا درست تبدیلیوں کے لیے ضروری ہے۔ یہاں ہمارے کنورٹر میں استعمال ہونے والے فارمولے ہیں:

پی ایکس سے آر ای ایم میں تبدیلی

پکسلز کو آر ای ایم یونٹس میں تبدیل کرنے کے لیے، پکسل کی قدر کو روٹ فونٹ سائز سے تقسیم کریں:

REM=PXrootFontSizeREM = \frac{PX}{rootFontSize}

مثال کے طور پر، ڈیفالٹ روٹ فونٹ سائز 16px کے ساتھ:

  • 16px = 1rem
  • 24px = 1.5rem
  • 8px = 0.5rem

پی ایکس سے ای ایم میں تبدیلی

پکسلز کو ای ایم یونٹس میں تبدیل کرنے کے لیے، پکسل کی قدر کو والدین عنصر کے فونٹ سائز سے تقسیم کریں:

EM=PXparentFontSizeEM = \frac{PX}{parentFontSize}

مثال کے طور پر، والدین فونٹ سائز 16px کے ساتھ:

  • 16px = 1em
  • 24px = 1.5em
  • 8px = 0.5em

آر ای ایم سے پی ایکس میں تبدیلی

آر ای ایم یونٹس کو پکسلز میں تبدیل کرنے کے لیے، آر ای ایم کی قدر کو روٹ فونٹ سائز سے ضرب دیں:

PX=REM×rootFontSizePX = REM \times rootFontSize

مثال کے طور پر، ڈیفالٹ روٹ فونٹ سائز 16px کے ساتھ:

  • 1rem = 16px
  • 1.5rem = 24px
  • 0.5rem = 8px

ای ایم سے پی ایکس میں تبدیلی

ای ایم یونٹس کو پکسلز میں تبدیل کرنے کے لیے، ای ایم کی قدر کو والدین عنصر کے فونٹ سائز سے ضرب دیں:

PX=EM×parentFontSizePX = EM \times parentFontSize

مثال کے طور پر، والدین فونٹ سائز 16px کے ساتھ:

  • 1em = 16px
  • 1.5em = 24px
  • 0.5em = 8px

آر ای ایم سے ای ایم میں تبدیلی

آر ای ایم یونٹس کو ای ایم یونٹس میں تبدیل کرنے کے لیے، روٹ فونٹ سائز اور والدین عنصر کے فونٹ سائز کو مدنظر رکھنا ضروری ہے:

EM=REM×rootFontSizeparentFontSizeEM = REM \times \frac{rootFontSize}{parentFontSize}

اگر روٹ اور والدین دونوں فونٹ سائز برابر ہوں (مثلاً 16px)، تو 1rem = 1em ہوگا۔

ای ایم سے آر ای ایم میں تبدیلی

ای ایم یونٹس کو آر ای ایم یونٹس میں تبدیل کرنے کے لیے، مندرجہ ذیل فارمولہ استعمال کریں:

REM=EM×parentFontSizerootFontSizeREM = EM \times \frac{parentFontSize}{rootFontSize}

ایک بار پھر، اگر دونوں فونٹ سائز برابر ہوں، تو 1em = 1rem ہوگا۔

پی ایکس سے آر ای ایم سے ای ایم یونٹ کنورٹر کا استعمال کیسے کریں

درست تبدیلیاں حاصل کرنا اس ٹول کے ساتھ سیدھا ہے۔ کلید یہ ہے کہ آپ اپنی مخصوص صورتحال کے لیے کون سے فونٹ سائز استعمال کرنے ہیں۔

فوری شروع گائیڈ

  1. اپنی قدر درج کریں کسی بھی فیلڈ میں—پکسل، آر ای ایم، یا ای ایم
  2. نتائج چیک کریں فوری طور پر دوسری دو یونٹوں میں
  3. فونٹ سائز ایڈجسٹ کریں اپنے پروجیکٹ سے میل کھانے کے لیے:
    • روٹ فونٹ سائز: جو آپ نے اپنے <html> عنصر پر سیٹ کیا ہے (عام طور پر 16px)
    • والدین فونٹ سائز: مخصوص عنصر کے والدین کا فونٹ سائز (بھی عام طور پر 16px)
  4. کاپی بٹن کا استعمال کرتے ہوئے قدر کاپی کریں جس کی آپ کو ضرورت ہے

اپنے پروجیکٹ کے لیے درست نتائج حاصل کرنا

کنورٹر ڈیفالٹ طور پر روٹ اور والدین دونوں فونٹ سائز کے لیے 16px استعمال کرتا ہے کیونکہ یہ براؤزر معیار ہے۔ لیکن یہاں وہ ہے جو اہم ہے: آپ کا اصل پروجیکٹ مختلف قدروں کا استعمال کر سکتا ہے۔

اپنا روٹ فونٹ سائز تلاش کرنا: اپنے براؤزر کے ڈویلپر ٹولز کھولیں، <html> عنصر کا معائنہ کریں، اور کمپیوٹڈ فونٹ-سائز چیک کریں۔ اگر آپ نے html { font-size: 62.5%; } سیٹ کیا ہے، تو آپ کا روٹ فونٹ سائز 10px ہے (16px کا 62.5%)۔

اپنا والدین فونٹ سائز تلاش کرنا: ای ایم تبدیلیوں کے لیے، آپ کو اس مخصوص والدین عنصر کا فونٹ سائز درکار ہے جہاں آپ اسٹائل لاگو کر رہے ہیں۔ ڈیو ٹولز میں اس عنصر کا معائنہ کریں تاکہ اس کا کمپیوٹڈ فونٹ-سائز دیکھ سکیں۔ اگر والدین کا font-size: 1.2rem ہے اور آپ کا روٹ 16px ہے، تو درست ای ایم گنتی کے لیے والدین فونٹ سائز کو 19.2px پر سیٹ کریں۔

عام تبدیلی کے سناریو

ڈیزائن سے کوڈ تک: آپ کی Figma فائل میں padding: 24px دکھاتی ہے۔ آپ بہتر رسائی کے لیے آر ای ایم یونٹ استعمال کرنا چاہتے ہیں۔ پی ایکس فیلڈ میں 24 درج کریں، اور آپ دیکھیں گے کہ یہ 1.5rem کے برابر ہے (16px روٹ کو فرض کرتے ہوئے)۔

بٹن کمپونینٹ بنانا: آپ چاہتے ہیں کہ پیڈنگ بٹن کے فونٹ سائز کے ساتھ اسکیل ہو۔ اگر بٹن کا font-size: 1.125rem (18px) ہے، والدین فونٹ سائز کو 18 پر سیٹ کریں، اپنا مطلوبہ پکسل پیڈنگ درج کریں، اور نتیجے والے ای ایم قدر کا استعمال کریں۔

ریسپانسیو ٹائپوگرافی: آپ ایک ہیڈنگ بنا رہے ہیں جو ڈیسک ٹاپ پر 32px ہے۔ 32px درج کریں تاکہ دیکھ سکیں کہ یہ 2rem ہے، جو صارفین کے براؤزر کے فونٹ سائز کو ایڈجسٹ کرنے پر مناسب طریقے سے اسکیل ہو گا۔

حقیقی دنیا کے CSS یونٹ تبدیلی کے استعمال کے کیسز

فارمولے جاننا ایک چیز ہے - انہیں پروڈکشن کوڈ میں مؤثر طریقے سے لاگو کرنا کچھ اور۔ یہاں وہ جگہ ہے جہاں یونٹ تبدیلی آپ کی پروجیکٹس میں ایک ٹھوس فرق پیدا کرتی ہے۔

ڈیزائن فائلوں کو ریسپانسو CSS میں تبدیل کرنا

آپ کو فگما ڈیزائن ملتا ہے جس میں سب کچھ پکسلز میں بیان کیا گیا ہے۔ کارڈ کمپونینٹ دکھاتا ہے:

  • پیڈنگ: 24px
  • ہیڈنگ فونٹ سائز: 28px
  • بॉڈی فونٹ سائز: 16px
  • مارجن نیچے: 40px

REM یونٹس میں تبدیل کرنے پر (16px روٹ مانتے ہوئے):

1.card {
2  padding: 1.5rem;        /* 24px → 1.5rem */
3  margin-bottom: 2.5rem;  /* 40px → 2.5rem */
4}
5
6.card__heading {
7  font-size: 1.75rem;     /* 28px → 1.75rem */
8}
9
10.card__body {
11  font-size: 1rem;        /* 16px → 1rem */
12}
13

فائدہ کیا ہے؟ جب کوئی صارف بصری خلل کے ساتھ اپنے براؤزر کا ڈیفالٹ فونٹ سائز 16px سے 20px تک بڑھاتا ہے، تو آپ کا کارڈ تناسب کے ساتھ بڑھتا ہے۔ پیڈنگ، مارجن، اور متن سب 25% بڑھتے ہیں، ڈیزائن کے بصری توازن کو برقرار رکھتے ہوئے۔ پکسل اقدار کے ساتھ، صرف متن بڑھے گا، جس سے لے آؤٹ ٹوٹ جائے گا۔

[باقی مواد اسی طرح سے مکمل طور پر اردو میں ترجمہ کیا جائے]

سی ایس ایس یونٹس کی تکامل: مقررہ سے لچک دار تک

پکسلز سے نسبی یونٹس کی طرف منتقلی ویب کی سفر کو ظاہر کرتی ہے - مختصر دستاویزوں سے لے کر ردعمل دینے والے ایپلی کیشنز تک۔ اس تاریخ کو سمجھنا یہ وضاحت کرتا ہے کہ آج ہم یونٹس کے درمیان کیوں تبدیلی کرتے ہیں۔

پکسل-مکمل دور (1990s-2000s)

ابتدائی ویب سائٹیں مخصوص اسکرین چوڑائیوں کے لیے ڈیزائن کی گئیں - 640px، پھر 800px، پھر 1024px۔ سی ایس ایس لے آؤٹس نے پکسلز کا استعمال کیا کیونکہ یہ پرنٹ ڈیزائنرز کے لیے واضح تھا۔ سائٹیں مختلف براؤزرز میں ایک جیسی دکھائی دیتی تھیں (جب وہ کام کرتی تھیں)، لیکن غیر متوقع اسکرین سائز پر وہ مکمل ٹوٹ جاتی تھیں۔ ویب کو پرنٹ کی طرح برتا جاتا تھا: مقررہ، کنٹرول شدہ، متوقع۔

ای ایم یونٹس سی ایس ایس اسپیسیفیکیشن میں موجود تھے، جو ٹائپوگرافی سے وراثت میں ملے تھے، لیکن زیادہ تر ڈویلپرز ان سے گریز کرتے تھے۔ جمع ہونے والا رویہ الجھن بھرا تھا، اور کوئی موبائل ڈیوائس نہیں تھا جو ہمیں لچک دار سوچنے پر مجبور کرتا۔

موبائل جگانے والا انتباہ (2007-2010)

آئی فون نے سب کچھ بدل دیا۔ اچانک، ٹریفک کا ایک اہم حصہ 320px چوڑی اسکرینوں سے آتا تھا۔ پنچ-ٹو-زوم نے مدد کی، لیکن 1024px ڈیسک ٹاپ کے لیے ڈیزائن کی گئی ویب سائٹیں موبائل پر تکلیف دہ تھیں۔

ایتھن مارکوٹے کا 2010 کا مضمون ردعمل دینے والی ویب ڈیزائن پر نے ایک نئے طریقے کو واضح کیا: مائع گریڈز، لچک دار تصاویر، اور میڈیا کویریز۔ نسبی یونٹس ضروری ہو گئے، اختیاری نہیں۔ لیکن ای ایم یونٹس کے جمع ہونے والے رویے نے پیچیدہ لے آؤٹس میں خرابیاں پیدا کیں۔

آر ای ایم یونٹس نے مدد کی (2010-موجودہ)

سی ایس ایس 3 نے 2010 کے آس پاس آر ای ایم یونٹ متعارف کرایا، جس نے ای ایم کی سب سے بڑی مشکل کو حل کیا: جمع ہونا۔ آر ای ایم نے ہمیں وراثت کی پیچیدگی کے بغیر نسبی اسکیلنگ دی۔ انٹرنیٹ ایکسپلورر 9 نے 2011 میں سپورٹ شامل کیا، اور 2015 تک، آر ای ایم یونٹس مرکزی بن گئے۔

آج، بہترین طریقے یونٹس کو حکمت عملی کے ساتھ ملاتے ہیں۔ ٹائپوگرافی اور جگہ کے لیے آر ای ایم۔ کمپونینٹ کے اندرونی تناسب کے لیے ای ایم۔ باریک تفصیلات کے لیے پکسلز۔ جدید سی ایس ایس فنکشنز جیسے clamp() ان یونٹس کو متحرک طور پر ملاتے ہیں، لے آؤٹس بناتے ہیں جو کسی بھی سیاق و سباق میں ڈھل جاتے ہیں۔

یہ تکامل - سخت پکسلز سے لچک دار نسبی یونٹس تک - صارف کی توقعات کی عکاسی کرتی ہے جو "ویب سائٹیں ہر جگہ ایک جیسی دکھنی چاہیے" سے بدل کر "ویب سائٹیں ہر جگہ اچھی طرح کام کرنی چاہیے" ہو گئی ہیں۔

یونٹ کنورژن کے لیے کوڈ مثالیں

جاوا اسکرپٹ یونٹ کنورٹر فنکشنز

1// PX، REM اور EM یونٹس کے درمیان تبدیلی
2const pxToRem = (px, rootFontSize = 16) => {
3  return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7  return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11  return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15  return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19  return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23  return em * (parentFontSize / rootFontSize);
24};
25
26// مثالی استعمال
27console.log(pxToRem(24));  // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
31

یونٹ کنورژن کے لیے CSS کسٹم پراپرٹیز

1:root {
2  /* بنیادی فونٹ سائز */
3  --root-font-size: 16px;
4  --base-font-size: var(--root-font-size);
5  
6  /* عام پکسل قدریں REM میں تبدیل */
7  --space-4px: 0.25rem;
8  --space-8px: 0.5rem;
9  --space-16px: 1rem;
10  --space-24px: 1.5rem;
11  --space-32px: 2rem;
12  --space-48px: 3rem;
13  
14  /* ٹائپوگرافی پیمانہ */
15  --text-xs: 0.75rem;    /* 12px */
16  --text-sm: 0.875rem;   /* 14px */
17  --text-base: 1rem;     /* 16px */
18  --text-lg: 1.125rem;   /* 18px */
19  --text-xl: 1.25rem;    /* 20px */
20  --text-2xl: 1.5rem;    /* 24px */
21}
22
23/* استعمال کی مثال */
24.card {
25  padding: var(--space-16px);
26  margin-bottom: var(--space-24px);
27  font-size: var(--text-base);
28}
29
30.card-title {
31  font-size: var(--text-xl);
32  margin-bottom: var(--space-8px);
33}
34

یونٹ کنورژن کے لیے SCSS مکسنز

1// یونٹ کنورژن کے لیے SCSS فنکشنز
2@function px-to-rem($px, $root-font-size: 16) {
3  @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7  @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11  @return $rem * $root-font-size * 1px;
12}
13
14// استعمال کی مثال
15.element {
16  padding: px-to-rem(20);
17  margin: px-to-rem(32);
18  font-size: px-to-rem(18);
19  
20  .nested {
21    // والد فونٹ سائز (18px) کا استعمال کرتے ہوئے em تبدیلی
22    padding: px-to-em(16, 18);
23    margin-bottom: px-to-em(24, 18);
24  }
25}
26

پائتھن یونٹ کنورٹر

1def px_to_rem(px, root_font_size=16):
2    """پکسل کو REM یونٹس میں تبدیل کریں"""
3    return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6    """REM یونٹس کو پکسل میں تبدیل کریں"""
7    return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10    """پکسل کو EM یونٹس میں تبدیل کریں"""
11    return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14    """EM یونٹس کو پکسل میں تبدیل کریں"""
15    return em * parent_font_size
16
17# مثالی استعمال
18print(f"16px = {px_to_rem(16)}rem")  # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px")    # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em")  # 24px = 1.5em
21

سی ایس ایس یونٹس کی تبدیلی میں عام غلطیاں

سینکڑوں کوڈ بیسز کا جائزہ لینے کے بعد، میں نے ان غلطیوں کو بار بار دیکھا ہے۔ ان سے بچنے سے آپ ڈیبگنگ کے وقت میں بچ سکیں گے۔

غلطی 1: کسٹم روٹ فونٹ سائز کا خیال نہ رکھنا

مسئلہ: آپ 24px کو 1.5rem میں تبدیل کرتے ہیں یہ فرض کرتے ہوئے کہ ڈیفالٹ 16px روٹ فونٹ سائز ہے، لیکن آپ کے پروجیکٹ میں html { font-size: 62.5%; } استعمال ہوتا ہے، جس سے روٹ 10px ہو جاتا ہے۔ آپ کا عنصر 24px کی بجائے 15px ہو جاتا ہے۔

حل: ہمیشہ تبدیل کرنے سے پہلے اپنے پروجیکٹ کے اصل روٹ فونٹ سائز کی جانچ کریں۔ کنورٹر کے روٹ فونٹ سائز کو اپنے پروجیکٹ کی حقیقت سے میل کھانے دیں۔

غلطی 2: نیسٹڈ کمپونینٹس میں ٹائپوگرافی کے لیے ای ایم یونٹس کا استعمال

مسئلہ: آپ ایک کارڈ کمپونینٹ بناتے ہیں جس میں ہیڈنگز کے لیے font-size: 1.2em ہے۔ یہ بہت اچھا کام کرتا ہے۔ پھر آپ ایک کارڈ کو دوسرے کارڈ کے اندر نیسٹ کرتے ہیں، اور اچانک اندرونی کارڈ کی ہیڈنگ 1.44em (1.2 × 1.2) ہو جاتی ہے، نہ کہ 1.2em۔

حل: ٹائپوگرافی کے لیے آر ای ایم یونٹس استعمال کریں جب تک کہ آپ خاص طور پر کاسکیڈنگ رویے کی خواہش نہ رکھتے ہوں۔ ای ایم یونٹس کو مقامی فونٹ سائز کے ساتھ اسکیل ہونے والی جگہ کے لیے محفوظ رکھیں۔

غلطی 3: بارڈر کی چوڑائی کو آر ای ایم میں تبدیل کرنا

مسئلہ: آپ مطابقت کے لیے border: 1px کو border: 0.0625rem میں تبدیل کرتے ہیں۔ جب صارفین زوم کرتے ہیں یا فونٹ سائز تبدیل کرتے ہیں، تو آپ کی بارڈرز موٹی اور بدصورت ہو جاتی ہیں۔

حل: بارڈرز کو پکسلز میں رکھیں۔ ساب-پکسل بارڈرز (0.5px) کی برائوزر سپورٹ متضاد ہے، اور بارڈرز کو شاذ و نادر ہی ٹیکسٹ کے ساتھ اسکیل کرنے کی ضرورت ہوتی ہے۔

غلطی 4: میڈیا کوئری یونٹس کو صارف کی ترجیحات کو بھول جانا

مسئلہ: آپ ٹیبلیٹ بریک پوائنٹ کے لیے @media (min-width: 768px) لکھتے ہیں۔ صارفین جو بڑا ڈیفالٹ فونٹ سائز سیٹ کرتے ہیں، انہیں ٹیبلیٹ لے آؤٹ نہیں ملتا جب انہیں ملنا چاہیے۔

حل: میڈیا کوئریز میں ای ایم یا آر ای ایم یونٹس استعمال کریں: @media (min-width: 48em)۔ یہ صارف کی فونٹ ترجیحات کا احترام کرتا ہے، جیسا کہ MDN ریسپانسیو ڈیزائن دستاویزات میں سفارش کی گئی ہے۔

غلطی 5: حساب کی مختلف طریقوں کو ملانا

مسئلہ: آپ کا Sass ایک حساب کا طریقہ استعمال کرتا ہے، آپ کا جاوا اسکرپٹ دوسرا، اور آپ کی ذہنی گنتی تیسرا۔ نتائج میل نہیں کھاتے، جس سے پکسل-دھکیلنے کی مایوسی ہوتی ہے۔

حل: اس کنورٹر کو سچ کا ذریعہ بنائیں۔ اسے بُک مارک کریں، کوڈ ریویو کے دوران اس کا حوالہ دیں، اور یقینی بنائیں کہ آپ کی ٹیم کے ہر شخص تبدیلی کی ایک ہی طریقہ کار استعمال کرتا ہے۔

اکثر پوچھے جانے والے سوالات

REM اور EM یونٹس میں کیا فرق ہے؟

حوالہ بالکل مختلف ہے۔ REM یونٹس ہمیشہ روٹ <html> عنصر کے فونٹ سائز کو دیکھتے ہیں - آپ کا عنصر کتنا گہرا نیسٹڈ ہو، 1rem ہمیشہ ایک ہی کمپیوٹڈ قدر کے برابر ہوتا ہے۔ EM یونٹس اپنے فوری والدین کے فونٹ سائز کو دیکھتے ہیں، جو ایک آبشاری اثر پیدا کرتا ہے۔

اس کو اس طرح سمجھیں: اگر آپ تین <div> عناصر کو نیسٹ کرتے ہیں، ہر ایک میں font-size: 1.2em، تو سب سے اندرونی div کا متن آپ کی توقع سے کہیں زیادہ بڑا ہو جائے گا کیونکہ ہر سطح پر ضرب بڑھتی جاتی ہے۔ ہر سطح پر font-size: 1.2rem کے ساتھ، تینوں divs کے فونٹ سائز بالکل ایک جیسے ہوں گے کیونکہ وہ سب روٹ کا حوالہ دیتے ہیں۔

یہی وجہ ہے کہ REM براؤزر سپورٹ بہتر ہونے کے بعد ٹائپوگرافی کے لیے مقبول ہوا - یہ وراثت کی زنجیروں کو ٹریک کرنے کے ذہنی بوجھ کو ختم کر دیتا ہے۔

[باقی مواد کا انوکراد جاری رہے گا...]

حوالے اور مزید مطالعہ

  1. "CSS قدریں اور اکائیاں ماڈیول سطح 3." W3C سفارش۔ https://www.w3.org/TR/css-values-3/

  2. مارکوٹ، ایتھن۔ "ردعمل ویب ڈیزائن۔" اے لسٹ اپارٹ، 25 مئی، 2010۔ https://alistapart.com/article/responsive-web-design/

  3. رٹر، ریچرڈ۔ "ٹائپوگرافک انداز کے عناصر ویب پر لاگو۔" http://webtypography.net/

  4. "CSS اکائیاں۔" MDN ویب دستاویزات۔ https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

  5. "CSS پکسلز بمقابلہ فزیکل پکسلز۔" سٹیک اوورفلو دستاویزات۔ https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels

  6. کوئیر، کرس۔ "CSS کی لمبائیاں۔" CSS-ٹرکس۔ https://css-tricks.com/the-lengths-of-css/

  7. "CSS کی کسٹم خصوصیات (متغیرات) استعمال کرنا۔" MDN ویب دستاویزات۔ https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

  8. "rem اکائیوں کو سمجھنا اور استعمال کرنا CSS میں۔" سائٹ پوائنٹ۔ https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

سی ایس ایس یونٹس کی درست تبدیلی شروع کریں

دستی سی ایس ایس یونٹ تبدیلی تھکاؤ دینے والی اور غلطی کا سبب بننے والی ہوتی ہے۔ آپ ذہنی حساب کر رہے ہیں، حسابات پر دوبارہ غور کر رہے ہیں، اور امید کر رہے ہیں کہ آپ فونٹ سائز درست کر رہے ہیں۔ یہ پی ایکس سے آر ای ایم سے ای ایم کنورٹر اس رکاوٹ کو ختم کرتا ہے۔

ڈیزائن فائلوں سے اپنے پکسل ویلیوز داخل کریں، فونٹ سائز کو اپنی پروجیکٹ کی ترتیب سے میل کھانے کے لیے ایڈجسٹ کریں، اور فوری طور پر درست آر ای ایم اور ای ایم ویلیوز حاصل کریں۔ انہیں سیدھے اپنے کوڈ میں کاپی کریں۔ چاہے آپ ایک نیا ڈیزائن سسٹم نافذ کر رہے ہوں، موجودہ کوڈ بیس کو نسبی یونٹس کے ساتھ تبدیل کر رہے ہوں، یا بس یہ سمجھنے کی کوشش کر رہے ہیں کہ یہ یونٹس کیسے متعلق ہیں، کنورٹر حساب کرتا ہے تاکہ آپ بلڈنگ پر توجہ مرکوز کر سکیں۔

قابل رسائی کے لحاظ سے مطابق سائٹس پر کام کرنے والے ڈویلپرز کے لیے، یہ ٹول یہ یقینی بنانے میں مدد کرتا ہے کہ آپ کی لے آؤٹس صحیح طریقے سے اسکیل ہوتی ہیں جب صارفین اپنی فونٹ ترجیحات کو ایڈجسٹ کرتے ہیں - جو کہ WCAG 2.1 لیول AA کے تحت ایک ضرورت ہے۔ کمپونینٹ لائبریریاں بنانے والوں کے لیے، یہ وضاحت کرتا ہے کہ کون سی ای ایم ویلیوز آپ چاہتے ہیں۔ فگما ڈیزائن کو پروڈکشن سی ایس ایس میں ترجمہ کرنے والے کسی بھی شخص کے لیے، یہ تبدیلی ورک فلو کو نمایاں طور پر تیز کرتا ہے۔

فارمولے W3C سی ایس ایس ویلیوز اینڈ یونٹس ماڈیول کی وضاحت پر مبنی ہیں، یہ یقینی بناتے ہوئے کہ تبدیلیاں براؤزرز کے طریقے سے بالکل ویسے ہی حساب کی جاتی ہیں۔