Px بمقابلہ Em بمقابلہ Rem: آپ کو کون سا CSS یونٹ استعمال کرنا چاہئے؟

ویب صفحات بناتے وقت آپ متن کے فونٹ سائز کو اپنی مرضی کے مطابق کرنے کے لیے کچھ CSS یونٹس سیکھنے جا رہے ہیں۔ بہت سی اکائیاں ہیں جیسے pt، pc، ex، وغیرہ، لیکن زیادہ تر صورتوں میں آپ کو تین سب سے مشہور اکائیوں پر توجہ مرکوز کرنی چاہیے: px، em، اور rem۔ بہت سے ڈویلپرز عام طور پر یہ نہیں سمجھتے کہ ان اکائیوں کے درمیان کیا فرق ہے۔ لہذا، ذیل میں ان اکائیوں کی تفصیلی وضاحت ہے۔

دن کی ویڈیو کا میک یوز

آگے بڑھنے سے پہلے، یاد رکھیں کہ یونٹ کی لمبائی کی دو قسمیں ہیں: مطلق اور رشتہ دار .

---

---

مطلق لمبائی

مطلق لمبائی کی اکائیاں مقرر ہیں، اور ان میں سے کسی ایک میں ظاہر کی گئی لمبائی بالکل اسی سائز کے طور پر ظاہر ہوگی۔

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

یونٹ	تفصیل
سینٹی میٹر	سینٹی میٹر
ملی میٹر	ملی میٹر
میں	انچ (1 انچ = 96px = 2.54 سینٹی میٹر)
px *	پکسلز (1px = 1/96 کا 1in)
pt	پوائنٹس (1pt = 1/72 کا 1in)
پی سی	سپیڈز (1pc = 12pt)

رشتہ دار لمبائی

متعلقہ لمبائی کی اکائیاں کسی اور لمبائی کی خاصیت کے نسبت ایک لمبائی کی وضاحت کرتی ہیں۔ متعلقہ لمبائی کی اکائیاں مختلف رینڈرنگ میڈیم کے درمیان بہتر پیمانے پر ہوتی ہیں۔

یونٹ	رشتہ دار
میں*	عنصر کے فونٹ سائز سے متعلق (2em کا مطلب ہے موجودہ فونٹ کے سائز سے 2 گنا)
سابق	موجودہ فونٹ کی x-اونچائی سے متعلق (شاذ و نادر ہی استعمال ہوتا ہے)
چودھری	'0' (صفر) کی چوڑائی کے نسبت
ریم*	روٹ عنصر کے فونٹ سائز سے متعلق
vw	ویو پورٹ کی چوڑائی کے 1% کے نسبت*
vh	ویو پورٹ کی اونچائی کے 1% کے نسبت*
منٹ	ویوپورٹ کے 1%* چھوٹے طول و عرض کے نسبت
vmax	ویو پورٹ کے* بڑے جہت کے 1% کے نسبت
%	والدین کے عنصر سے متعلق

1. Px (پکسل)

Pixel شاید CSS میں سب سے زیادہ استعمال ہونے والی اکائی ہے اور جب ویب پیجز پر ٹیکسٹ کا فونٹ سائز سیٹ کرنے کی بات آتی ہے تو یہ بہت مشہور ہے۔ ایک پکسل (1px) کو پرنٹ میڈیا میں ایک انچ کے 1/96ویں حصے کے طور پر بیان کیا گیا ہے۔

ہارڈ ڈرائیو کو لیپ ٹاپ سے کیسے جوڑیں

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

---

---

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

یہ وہ جگہ ہے جہاں ڈیوائس کا پکسل تناسب آتا ہے۔ یہ بنیادی طور پر صرف ایک طریقہ ہے جس سے اندازہ لگایا جاسکتا ہے کہ ایک CSS پکسل (1px) ڈیوائس کی اسکرین پر کتنی جگہ لے گا جو اسے کسی دوسرے ڈیوائس کے مقابلے میں ایک ہی سائز میں نظر آنے کے قابل بنائے گا۔

---

---

ذیل میں ایک مثال ہے:-

<div class="container"> 
     <div> 
       <h1>This is a paragraph</h1> 
       <p> 
         Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
         Reprehenderit incidunt perferendis iure veritatis cupiditate delectus 
         omnis at! Officiis praesentium officia, nemo veniam consequatur 
         nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor 
         sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus 
         amet possimus iure impedit assumenda distinctio aliquid debitis, autem 
         vel ullam aut, quod corporis ratione atque ducimus dolorum. 
       </p> 
     </div> 
   </div> 

.container { 
  width: 100%; 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
.container div { 
  max-width: 500px; 
  padding: 5px 20px; 
  border: 1px grey solid; 
  border-radius: 10px; 
} 
p { 
  font-size: 16px; 
}

آؤٹ پٹ

ٹاپ باکس یہ ہے کہ لیپ ٹاپ جیسی بڑی اسکرین پر ظاہر ہونے پر یہ کیسا لگتا ہے، اور نیچے والا باکس یہ ہے کہ یہ کیسا لگتا ہے۔ جب فون کی طرح چھوٹی اسکرین پر ظاہر ہوتا ہے۔ .

نوٹ کریں کہ دونوں خانوں میں متن ایک ہی سائز کا کیسے ہے، بنیادی طور پر پکسل کیسے کام کرتا ہے۔ یہ ویب مواد (صرف متن ہی نہیں) آلات پر ایک ہی سائز میں نظر آنے میں مدد کرتا ہے۔

2. میں (M)

ایم یونٹ کو اس کا نام بڑے حرف 'M' (em) سے ملا ہے کیونکہ زیادہ تر CSS یونٹ ٹائپوگرافی سے آتے ہیں۔ یہ بنیادی عنصر کے موجودہ فونٹ سائز کو اپنی بنیاد کے طور پر استعمال کرتا ہے۔ اسے والدین سے وراثت میں ملنے والے فونٹ سائز کی بنیاد پر کسی عنصر کے فونٹ سائز کو بڑھانے یا اسکیل کرنے کے لیے استعمال کیا جا سکتا ہے۔

فرض کریں کہ آپ کے پاس پیرنٹ ڈیو ہے جس کا فونٹ سائز 16px ہے۔ اگر آپ اس div میں پیراگراف کا عنصر بناتے ہیں اور اسے 1em کا فونٹ سائز دیتے ہیں تو پیراگراف فونٹ کا سائز 16px ہوگا۔

تاہم، اگر آپ دوسرا پیراگراف 2em کا فونٹ سائز دیتے ہیں جو 32px میں ترجمہ کرے گا۔ ذیل کی مثال پر غور کریں:

مفت فوٹو ایڈیٹنگ سافٹ ویئر استعمال کرنا آسان ہے۔

   <div class="div-one"> 
      <p class="one-em">1 em based on 10px</p> 
      <p class="two-em">2 em based on 10px</p> 
  </div> 
    <div class="div-two"> 
     <p class="one-em">1 em based on 10px</p> 
     <p class="two-em">2 em based on 10px</p> 
    </div> 
   </div> 

.div-one { 
  font-size: 15px; 
} 
.div-two { 
  font-size: 20px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
}

آؤٹ پٹ

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

اگر صحیح طریقے سے استعمال نہیں کیا گیا تو، آپ کو اسکیلنگ کے مسائل کا سامنا کرنا پڑ سکتا ہے جہاں DOM درخت میں سائز کی پیچیدہ وراثت کی بنیاد پر عناصر کو صحیح طریقے سے سائز نہیں کیا جا سکتا ہے۔

3. ریم (روٹ ایم)

Rem تقریباً em جیسا ہی کام کرتا ہے، لیکن بنیادی فرق یہ ہے کہ rem صرف والدین کے فونٹ سائز کے بجائے صفحہ پر روٹ عنصر کے فونٹ سائز کا حوالہ دیتا ہے۔ روٹ فونٹ سائز پہلے سے طے شدہ فونٹ سائز ہے جسے صارف نے اپنے براؤزر کی ترتیبات میں یا آپ کے ذریعہ، ڈویلپر کے ذریعہ بیان کیا ہے۔

ویب براؤزر کا ڈیفالٹ فونٹ سائز عام طور پر 16px ہوتا ہے لہذا 1rem 16px اور 2rem 32px ہوگا۔ تاہم، ایسی صورت میں جہاں مثال کے طور پر روٹ فونٹ سائز کو 10px میں تبدیل کر دیا جاتا ہے۔ 1rem 10px اور 2rem 20px ہوگا۔

چیزوں کو واضح کرنے کے لیے یہاں ایک مثال ہے:

تصویر فائل کو چھوٹا بنانے کا طریقہ

   <div class="div-one"> 
     <!-- EM --> 
     <p class="one-em">1 em based on container (40px)</p> 
     <p class="two-em">2 em based on container (40px)</p> 
     <!-- REM --> 
     <p class="one-rem">1 rem based on root (16px)</p> 
     <p class="two-rem">2 rem based on root (16px)</p> 
   </div> 

.div-one { 
  font-size: 40px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
} 
.one-rem { 
  font-size: 1rem; 
} 
.two-rem { 
  font-size: 2rem; 
} 

آؤٹ پٹ

جیسا کہ آپ دیکھ سکتے ہیں، REM یونٹس کے ساتھ بیان کردہ پیراگراف ہمارے کنٹینر میں اعلان کردہ فونٹ سائز سے مکمل طور پر غیر متاثر ہیں اور سختی سے روٹ فونٹ سائز HTML عنصر سلیکٹر میں بیان کیا گیا ہے۔

Px بمقابلہ Em بمقابلہ ریم: کون سا یونٹ بہترین ہے؟

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