ایم ایم کی بنیاد پر سائز کے ساتھ ایک ذمہ دار سائٹ ڈیزائن

Jan 20, 2026

کيسے

آپ نے شاید سنا ہے کہ آپ کو فونٹ سائز کے لئے رشتہ دار یونٹس کا استعمال کرنا چاہئے. یہ قابل رسائی ویب ڈیزائن کے لئے ایک اچھا اصول ہے؛ اگر صارف اپنے براؤزر کے ڈیفالٹ فونٹ کا سائز تبدیل کرتا ہے، تو یہ آپ کے صفحے کے متن کے مطابق سائز تبدیل کرنے کے قابل بناتا ہے. آپ نے یہ مشورہ لیا اور سوئچ بنا دیا. شاید آپ نے اپنے کیلکولیٹر کو باہر نکال دیا اور آپ کی سائٹ کے فونٹ کے سائز کو مطلق سے تبدیل کر دیا پی ایکس ئیمایس یا زیادہ امکان، ریمز کے لئے یونٹس.

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

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

فونٹ سائز یونٹس

فونٹ سائز کے لئے ئیمایس کا استعمال مشکل ہوسکتا ہے. عین مطابق قیمت عنصر کے وراثت فونٹ سائز (I.e. والدین عنصر کے فونٹ سائز کی طرف سے مقرر کیا جاتا ہے. یہ پیچیدہ ہو جاتا ہے جب آپ گھوںسلا عناصر کو زیادہ گہرائی سے شروع کرتے ہیں. اگر ایک عنصر ئیمایس میں فونٹ کا سائز ہے تو، اس کے والدین میں ئیمایس میں فونٹ کا سائز ہے، اور اس کے والدین ابھی تک ایک دوسرے ہیں. بچے کے عنصر کی اصل تحریر قیمت کا تعین کرنے کے لئے آپ کو ان تمام اقدار کو ضائع کرنا پڑے گا.

اس کا مطلب یہ ہے کہ مختلف کنٹینرز میں اسی ماڈیول کو برقرار رکھنے میں ایم ایم کے معنی کو تبدیل کر سکتا ہے. ماڈیول غیر متوقع ہو جائے گا.

اس سے بچنے کے لئے، ہم عام طور پر فونٹ سائز کے لئے ایک مختلف رشتہ دار یونٹ کا استعمال کرتے ہیں: Rems. ایک REM (یا 'جڑ ایم') وراثت فونٹ سائز پر مبنی نہیں ہے، لیکن صفحے کے جڑ عنصر کے فونٹ سائز پر، & lt؛ ایچ ٹی ایم ایل اور جی ٹی؛ . اس کا مطلب یہ ہے کہ اس کی قیمت پورے صفحے میں ہی ہے. یہ زیادہ متوقع ہے، اور اکثر، باقاعدگی سے ئیمایس کے لئے ترجیح دیتے ہیں.

ئیمایس کے ساتھ ایک ماڈیول کی تعمیر

ایک ماڈیول کی تعمیر کے لئے رشتہ دار یونٹس کا استعمال کرتے ہیں. تاہم، ہم عام نقطہ نظر کی پیروی نہیں کر رہے ہیں. ہر چیز کے لئے REM کا استعمال کرنے کے بجائے، ہم صرف ایک بار استعمال کریں گے: ماڈیول کے سب سے اوپر عنصر پر. یہ ماڈیول کے لئے ایک معروف فونٹ کا سائز قائم کرے گا، اس کے بجائے اس کے اوپر اس کے اوپر ایم اقدار کی غیر متوقع سلسلہ پر مبنی ہے. اس کا مطلب یہ ہے کہ ہم ایک ہی قدر کو ختم کرکے ماڈیول کے سائز کو آسانی سے پیمانے پر پیمانے پر پیمانے لگ سکتے ہیں.

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — معروف فونٹ سائز قائم کرنے کے لئے بیرونی ترین عنصر پر ریمز کا استعمال کریں، پھر اس قدر کی بنیاد پر تعمیر کرنے کے لئے ئیمایس کا استعمال کریں

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

ہم ایک سرنگ اور ایک جسم کے ساتھ ایک پینل بنائے گا. مارک اپ اس طرح لگ رہا ہے:

 & lt؛ ڈوی کلاس = "پینل" اور جی ٹی؛
  & lt؛ div class = "پینل کی سرخی" اور جی ٹی؛
    & lt؛ h3 & gt؛ دیکھو ئیمایس & lt؛ / h3 & gt؛
  & lt؛ / div & gt؛
  & lt؛ ڈوی کلاس = "پینل جسم" اور جی ٹی؛
    اس طریقوں پر غور کریں جو آپ رشتہ دار سے فائدہ اٹھا سکتے ہیں
    آپ کے ماڈیولز کے متحرک سائز کے لئے یونٹس.
  & lt؛ / div & gt؛
& lt؛ / div & gt؛

آتے ہیں بیرونی کنٹینر. ہم فونٹ کا سائز مقرر کریں گے 1rem. ہمارے مقامی EM قیمت قائم کرنے کے لئے. پھر ہم وضاحت کریں گے سرحدی ردعمل ئیمایس کا استعمال کرتے ہوئے. میں عام طور پر پی ایکس ایکس استعمال کرنا چاہتا ہوں، اگرچہ، ایک اچھا ٹھیک لائن حاصل کرنے کے لئے.

 .پنیل {
  فونٹ سائز: 1rem؛
  سرحد: 1px ٹھوس # 678؛
  سرحدی ردعمل: 0.3em؛
  چھپا ہوا رساو؛
}

اگلا، اندرونی عناصر سٹائل. ہم ئیمایس پڈنگنگ کے لئے استعمال کریں گے. اس کے بعد ہم 20px computed سائز پیدا کرنے، ہمارے مقامی EM کی قیمت 1.25 گنا تک عنوان کے فونٹ سائز میں اضافہ کریں گے.

 .پیل سرنگ {
  Padding: 0.6em 1.2em؛
  پس منظر کا رنگ: #cde؛
  سرحد کے نیچے: 1px ٹھوس # 678؛
}
.پلیل سرنگ اور جی ٹی؛ H3 {
  فونٹ سائز: 1.25em؛
  مارجن: 0؛
  خط وقفے: 0.03em؛
}
.پلین جسم {
  Padding: 0.6em 1.2em؛
}

آپ ان کے مناسب اقدار (9.6px عمودی اور 19.2px افقی) کا تعین کرنے کے لئے ان کے فونٹ سائز کی طرف سے پڈنگنگ اقدار کو ضائع کر سکتے ہیں. سچ میں، اگرچہ، کوئی فرق نہیں پڑتا. پکسل - کامل پیمائش کے ساتھ نیچے پھینکنے کی کوشش کریں. یہ عجیب محسوس ہوسکتا ہے، لیکن پریس. زیادہ سے زیادہ آپ ئیمایس کا استعمال کرتے ہیں، زیادہ آپ ان کے ساتھ ان کے اپنے احترام میں ان کے ساتھ واقف ہو جائیں گے.

ڈیزائن کو متحرک طور پر سکیننگ

جب ہم اس طرح دوبارہ قابل استعمال ماڈیول بناتے ہیں، تو ہم اکثر تلاش کرتے ہیں ہمیں کچھ مختلف حالتوں کی ضرورت ہے. کہہ دو کہ ہم ایک بڑا ورژن بنانا چاہتے ہیں. اگر ہم ہر چیز کے لئے پی ایکس کا استعمال کر رہے تھے، تو اس کا مطلب یہ ہے کہ فونٹ کا سائز، پڈنگنگ، سرحدی ردعمل اور اسی طرح. تاہم، کیونکہ ہم نے ایک REM پر مبنی فونٹ سائز کے سلسلے میں ہر چیز کی وضاحت کی ہے، ہمیں صرف اس قدر کو تبدیل کرنے کی ضرورت ہے، اور پورے ماڈیول کا جواب دیا جائے گا:

 .پیل - بڑے {فونٹ سائز: 1.2rem؛ }

ہم صرف اس کلاس کو ایک پینل میں شامل کرنے کے لئے شامل کرتے ہیں: & lt؛ div class = "پینل پینل - بڑے" & gt؛ . یہ ایک ایم ایم کی مقامی تعریف کو تبدیل کرے گا، اور اس طرح اس کے بچے کے عناصر کے فونٹ سائز کے ساتھ ساتھ ساتھ ساتھ سرحدی ردعمل اور بھرتی تبدیلی بھی بدل جائے گی. ایک اعلامیہ کے ساتھ، ہم نے ماڈیول کے ہر حصے کو دوبارہ تبدیل کر دیا ہے.

A panel module, with paddings and border radius defined using ems — ایک پینل ماڈیول، ئیمایس کا استعمال کرتے ہوئے paddings اور سرحدی ردعمل کے ساتھ

اسی طرح، ہم ایک چھوٹا سا ورژن بنا سکتے ہیں:

 .پنیل - چھوٹے {فونٹ سائز: 0.8rem؛ }

Rems میں ایک اعلی درجے کے فونٹ سائز کا استعمال کرتے ہوئے ماڈیول کو گراؤنڈ کرکے، ہم نے اسے مستحکم اور ممکنہ طور پر بنایا ہے. ئیمایس کا استعمال کرتے ہوئے کے اندر اندر سب کچھ کی وضاحت کرکے، ہم نے اس کے تمام اجزاء کے حصوں کو اسکالبل بنایا ہے.

It is possible to base the size of everything inside the module on one value, then change that value to scale it all — ایک قیمت پر ماڈیول کے اندر ہر چیز کے سائز کی بنیاد پر یہ ممکن ہے، پھر اس قیمت کو تبدیل کرنے کے لئے اسے تبدیل کریں

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

یہ ذمہ دار بنانا

چلو اصول ایک سطح پر مزید دھکا دیتے ہیں. ہم نے ریمز اور ئیمایس کا استعمال کرتے ہوئے ماڈیول (اور نظریاتی طور پر تمام دیگر ماڈیولز) کا استعمال کیا ہے. اس کا مطلب یہ ہے کہ ان کا سائز جڑ عنصر کے فونٹ سائز پر مبنی ہے. اس کے بعد، ہم پورے صفحے کو تبدیل کرنے کے لۓ اس واحد قدر کو ایڈجسٹ کرسکتے ہیں.

چلو ایک اور رشتہ دار یونٹ میں آتے ہیں: VH. . اس یونٹ کے قابل قدر قدر صارف کی اسکرین کے سائز سے حاصل کیا جاتا ہے؛ یہ Viewport کی چوڑائی کے 1 فی صد کے برابر ہے. اگر ہم جڑ فونٹ کا سائز کی وضاحت کرنے کے لئے VH یونٹ کا استعمال کرتے ہیں، تو یہ خود بخود ذمہ دارانہ طور پر پیمانے پر پیمانے پر، سینز میڈیا سوالات. جڑ پر فونٹ کا سائز مقرر کریں 2vw. انکار

 ایچ ٹی ایم ایل {
  فونٹ سائز: 2 وی ڈبلیو؛
}

بدقسمتی سے، اثر تھوڑا سا مضبوط ہے. ایک آئی فون 6 پر، مثال کے طور پر، یہ 5.5px تک شمار کرے گا، جو بہت چھوٹا ہے. اسی طرح، یہ بڑی اسکرین پر ناقابل یقین حد تک بڑی ہے. اثر کو نرم کرنے کے لئے، ہم سی ایس ایس کے استعمال کر سکتے ہیں کیلک () فنکشن:

 ایچ ٹی ایم ایل {
  فونٹ سائز: کیلک (0.6em + 1VW)؛
}

اب فونٹ کا سائز ایک مستحکم قیمت سے جزوی طور پر حاصل کیا جاتا ہے، اور جزوی طور پر ایک ذمہ دار ایک سے. یہ ایک بہتر اثر پیدا کرتا ہے. The. 0.6. کم از کم فونٹ سائز کے طور پر سلوک کرتا ہے. اب جڑ EM ایک اوسط ڈیسک ٹاپ اسکرین پر اسمارٹ فون پر اسمارٹ فون پر تقریبا 13 پی ایکس سے بہاؤ کی پیمائش کرے گی.

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

آپ کو اب بھی لائن ریپنگ اور کچھ دیگر ذمہ دار خدشات کو کنٹرول کرنے کے لئے کبھی کبھار میڈیا کے سوال کو شامل کرنے کی ضرورت ہوسکتی ہے. لیکن ئیمایس اور ریمز کا استعمال کرتے ہوئے اس کی عادت کے ساتھ مل کر یہ چھوٹا سا کوڈ آپ کو وہاں بہت سارے راستے مل جائے گا.

یہ مضمون اصل میں شامل کیا گیا تھا نیٹ میگزین مسئلہ 288؛ اسے خریدیں

متعلقہ مضامین:

10 نوع ٹائپ ٹیکنیکس ہر ڈیزائنر کو جاننا چاہئے
نوع ٹائپ اور فانٹ کے ڈیزائنر کا گائیڈ
ماسٹر قابل رسائی ویب نوع ٹائپ

ایم ایم کی بنیاد پر سائز کے ساتھ ایک ذمہ دار سائٹ ڈیزائن

فونٹ سائز یونٹس

ئیمایس کے ساتھ ایک ماڈیول کی تعمیر

ڈیزائن کو متحرک طور پر سکیننگ

یہ ذمہ دار بنانا

کيسے - انتہائی مشہور مضامین

مخلوط میڈیا آرٹ ٹیوٹوریل: ڈیجیٹل آرٹ ورک پر پانی کے رنگ کس طرح

فوٹوشاپ میں جھرنا کیسے ہٹانے کے لئے

سی ایس ایس میں روشنی یا سیاہ طریقوں کو کیسے لاگو کرنے کے لئے

سی ایس ایس میں چپچپا متن اور تصویر اثرات کیسے بنائیں

سکیٹ اپ کے ساتھ ایک کیسل پینٹ کیسے کریں

ڈاز سٹوڈیو اور زبرش کے درمیان کیسے منتقل

فوٹوشاپ میں تصاویر کو مطابقت دینے کے لئے حتمی گائیڈ

مجسمہ اور پینٹ کی نقل مکانی کے نقشے کو کیسے جوڑنا

اقسام