ایک اور عنصر جو موبائل فرسٹ ریسپانسیو ڈیزائن پر توجہ مرکوز کرتا ہے وہ یہ ہے کہ زیادہ تر لوگ اپنے موبائل آلات کے ذریعے انٹرنیٹ تک رسائی حاصل کرتے ہیں، جو کہ 60% ہے۔ جبکہ صرف 20% لوگ ڈیسک ٹاپ پر انٹرنیٹ استعمال کرتے ہیں۔
یہ مضمون موبائل فرسٹ ریسپانسیو ڈیزائن بنانے کے لیے ہدایات کا احاطہ کرے گا۔
موبائل فرسٹ ریسپانسیو ڈیزائن کیسے ترتیب دیا جائے؟
جوابی ڈیزائن چاہے وہ موبائل فرسٹ ریسپانسیو ہو یا بڑی سکرین کے لیے ذیل میں دیے گئے طریقوں پر عمل کر کے بنایا جا سکتا ہے۔
- ایک موبائل فرسٹ ریسپانسیو ڈیزائن بنائیں۔
- بڑی اسکرینوں کے لیے ایک ذمہ دار ڈیزائن تیار کرنے/بنانے کے لیے میڈیا استفسار کا استعمال/استعمال کریں۔
طریقہ 1: موبائل فرسٹ ریسپانسیو ڈیزائن بنائیں
سب سے پہلے، موبائل فرسٹ ڈیزائن اپروچ بنانے کے ساتھ شروع کریں۔ اس مقصد کے لیے، ذیل میں فراہم کردہ مرحلہ وار ہدایات پر عمل کریں۔
مرحلہ 1: ایک HTML ڈھانچہ بنائیں
سب سے پہلے، ایک HTML ڈھانچہ بنائیں اور ایک شامل کریں ' بوٹسٹریپ ' میں سیکشن HTML سیکشن میں اسٹائل شیٹ کا اضافہ جاننے کے لیے اس پر کلک کریں۔ لنک . ایک بنیادی ویب سائٹ کا ڈھانچہ بنانے کے بعد بشمول، <کوئی نہیں> , <ہیڈر> اور جیسا کہ ذیل میں فراہم کیا گیا ہے:
< جسم ><ہیڈر>
<کوئی نہیں>
< ال >
< کہ >< a href = '#' > گھر < / a >< / کہ >
< کہ >< a href = '#' > ہمارے بارے میں < / a >< / کہ >
< کہ >< a href = '#' > ہماری خدمات < / a >< / کہ >
< کہ >< a href = '#' > ہم سے رابطہ کریں۔ < / a >< / کہ >
< / ال >
< / نہیں>
< / ہیڈر>
<سیکشن>
< h1 > لینکس اشارے میں خوش آمدید < / h1 >
< ص > ایک سبق آموز ویب سائٹ۔ < / ص >
< / سیکشن>
< / main>
< ص > لینکس اشارہ کاپی رائٹ < / ص >
< / فوٹر>
< / جسم >
مرحلہ 2: CSS کا اطلاق کریں۔
باڈی سیکشن میں، سیٹ کریں ' فونٹ فیملی 'سے' سینز سیرف ' پیڈنگ، مارجن اور پس منظر کا رنگ بھی سیٹ کریں۔ اس کے بعد ہیڈر، فوٹر اور نیویگیشن پر CSS لگائیں:
جسم {فونٹ فیملی : سینز سیرف ;
مارجن : 0 ;
بھرتی : 0 ;
پس منظر کا رنگ : #808080 ;
}
ہیڈر {
پس منظر کا رنگ : جامنی ;
رنگ : سفید ;
بھرتی : 8px ;
}
nav ul {
فہرست طرز کی قسم : کوئی نہیں ;
بھرتی : 0 ;
مارجن : 0 ;
}
ان کا جہاز {
مارجن : 4px 0 ;
}
nav ul li a {
رنگ : سفید ;
متن کی سجاوٹ : کوئی نہیں ;
}
مرکزی {
بھرتی : 18px ;
}
فوٹر {
پس منظر کا رنگ : گلابی ;
رنگ : سفید ;
متن سیدھ : مرکز ;
بھرتی : 8px ;
}
جیسا کہ مشاہدہ کیا جا سکتا ہے، مندرجہ ذیل آؤٹ پٹ نے اس بات کی تصدیق کی ہے کہ ڈیزائن موبائل فرسٹ ریسپانسیو ہے۔
طریقہ 2: بڑی اسکرینوں کے لیے ریسپانسیو ڈیزائن بنانے کے لیے میڈیا کے سوالات کا استعمال کریں۔
اوپر والا ڈیزائن بڑی اسکرینوں جیسے ٹیبلیٹ اور ڈیسک ٹاپس کے لیے بھی بنایا جا سکتا ہے۔ اس مقصد کے لیے، صارفین کو CSS میں میڈیا کے استفسار کو شامل کرنے کی ضرورت ہے۔ گولیوں کی چوڑائی ہے ' 786px اور ڈیسک ٹاپس کے لیے ہے 1024px '
میڈیا کے سوالات کو لاگو کرنے کے لیے، پہلے، شامل کریں ' @media سی ایس ایس فائل میں ٹیگ۔ اس کے بعد، 'کم سے کم چوڑائی' خاصیت کو بطور ' 768px ' اس کا مطلب ہے کہ جب بھی اسکرین کا کم از کم سائز '768px' یا اس سے اوپر پورا ہو جائے گا، تو درج ذیل CSS لاگو ہوں گے:
@media ( کم سے کم چوڑائی : 768px ) {جسم {
حرف کا سائز : 14px ;
}
ہیڈر {
بھرتی : 18px ;
}
nav ul {
ڈسپلے : فلیکس ;
}
ان کا جہاز {
مارجن : 0 8px ;
}
مرکزی {
ڈسپلے : فلیکس ;
جواز فراہم کرنے والا مواد : کے درمیان خلا ;
سیدھ میں آنے والی اشیاء : مرکز ;
}
فوٹر {
بھرتی : 18px ;
}
}
مندرجہ ذیل آؤٹ پٹ نے یہ ظاہر کیا کہ ڈیزائن بڑی اسکرینوں پر بھی جوابدہ ہے:
نتیجہ
موبائل فرسٹ ریسپانسیو ڈیزائن ترتیب دینے کے لیے، پہلے ایک HTML ڈھانچہ بنائیں اور ویو پورٹ شامل کریں۔ اس کے بعد ہیڈ ٹیگ میں سی ایس ایس فائل کو لنک کریں۔ پھر، موبائل فرسٹ ریسپانسیو ڈیزائن پر مبنی CSS کا اطلاق کریں۔ مزید برآں، صارفین موبائل ڈیوائس پر ایڈجسٹ کرنے کے لیے CSS میڈیا استفسار شامل کر سکتے ہیں۔ اس تحریر نے موبائل فرسٹ ریسپانسیو ڈیزائن ترتیب دینے کے لیے ایک تفصیلی طریقہ کار کا مظاہرہ کیا ہے۔