اس پوسٹ میں میڈیا کے سوالات کو لاگو کرنے کے لیے ضروری ہدایات کا ذکر کیا جائے گا۔
موبائل آلات کے لیے میڈیا کے سوالات کو کیسے نافذ کیا جائے؟
میڈیا کے استفسار کا اطلاق موبائل آلات پر صرف ذکر کر کے کیا جا سکتا ہے۔ @media ٹیگ کریں اور چھوٹے منحنی خطوط وحدانی میں اسکرین کے سائز کی وضاحت کریں۔ اس میڈیا استفسار کے لیے CSS کو پھر گھنگھریالے منحنی خطوط وحدانی کے اندر شامل کیا جا سکتا ہے۔ جب بھی اسکرین کا سائز صارف کی طرف سے متعین کردہ سائز پر پورا اترتا ہے، یہ بیان کردہ میڈیا استفسار کو لاگو کرے گا۔
آئیے موبائل آلات کے لیے میڈیا کے سوالات کے نفاذ کو سیکھنے کے لیے ایک عملی مثال کا جائزہ لیتے ہیں۔
مثال: ایک ایسا لے آؤٹ بنائیں جو دو کالم لے آؤٹ سے ایک کالم لے آؤٹ میں میڈیا کے سوالات کو لاگو کر کے بدل جائے۔
ذیل کی مثال میں، ویب صفحہ کا لے آؤٹ کالم لے آؤٹ سے سنگل کالم لے آؤٹ میں تبدیل ہو جائے گا:
مرحلہ 1: ایک HTML ڈھانچہ بنائیں
- سب سے پہلے، ایک HTML فائل بنائیں اور اس میں بیرونی CSS اسٹائل شیٹ فائل کو لنک کریں۔ سیکشن
- پھر، ایک بنائیں <ہیڈر> سیکشن اور ویب سائٹ کی سرخی کا استعمال کرتے ہوئے شامل کریں۔ ٹیگ
- بنائیے ایک 'کنٹینر کلاس' کے کلاس نام سے اور اس کے اندر دو مزیدکا کلاس نام ہے ' کالم ' < جسم >
<ہیڈر>
< h1 > لینکس کا اشارہ < / h1 >
< / ہیڈر>
< div کلاس = 'کنٹینر کلاس' >
< div کلاس = 'کالم' >
< h2 > سیکشن ون < / h2 >
< ص > لینکس اشارہ بہترین ای لرننگ پلیٹ فارمز میں سے ایک ہے۔ < / ص >
< / div >
< div کلاس = 'کالم' >
< h2 > سیکشن دو < / h2 >
< ص > لینکس اشارہ بہترین ای لرننگ پلیٹ فارمز میں سے ایک ہے۔ < / ص >
< / div >
< / div >
< / جسم >مرحلہ 2: CSS کا اطلاق کریں۔
جسم کے حصے پر:- سب سے پہلے، 'لکھ کر باڈی سیکشن کی وضاحت کریں۔ جسم ٹیگ کریں اور گھوبگھرالی منحنی خطوط وحدانی کا ذکر کریں۔
- منحنی خطوط وحدانی کے اندر، فونٹ فیملی، پس منظر کا رنگ، مارجن، اور پیڈنگ کی وضاحت کریں۔
پر <ہیڈر> سیکشن:
- متن کا رنگ، متن کی سیدھ، پس منظر کا رنگ، اور پیڈنگ کی وضاحت کریں۔
پر 'کنٹینر کلاس' div:
- مقرر ' ڈسپلے 'پراپرٹی ویلیو' فلیکس Flexbox بنانے کے لیے۔
- کا استعمال کرتے ہیں ' جواز فراہم کرنا مواد کے درمیان جگہ شامل کرنے اور پیڈنگ شامل کرنے کے لیے۔
کالم کلاس پر:
- پہلے، بیان کردہ قدر کی وضاحت کریں ' فلیکس دو لے آؤٹ سیکشنز کے درمیان جگہ شامل کرنے کے لیے پراپرٹی۔
- اس کے بعد، پس منظر کا رنگ، بارڈر، پیڈنگ، اور باکس کا سائز شامل کریں۔
مرحلہ 3: میڈیا استفسار کا اطلاق کریں۔
- موبائل آلات کے لیے میڈیا استفسار کو لاگو کرنے کے لیے، پہلے، ' @media 'ٹیگ۔
- پھر، قدر کی وضاحت کریں ' 768px 'جو موبائل آلات کے لیے عام ہے' زیادہ سے زیادہ چوڑائی 'چھوٹے منحنی خطوط وحدانی کے اندر جائیداد۔
- اس کے بعد، وضاحت کریں ' کالم 'قدر' لچکدار سمت 'جائیداد جس کا اطلاق ہوگا' کنٹینر کلاس' کلاس۔ یہ دونوں کالموں کو ایک کالم میں تبدیل کر دے گا جب بھی مخصوص سکرین کے سائز کا پتہ چل جائے گا۔
- آخر میں، 'پر سی ایس ایس کا اطلاق کریں کالم 'کلاس اور وضاحت کریں' مارجن 'اور' فلیکس اقدار:
فونٹ فیملی: sans-serif؛
پس منظر- رنگ : چاندی
مارجن: 0 ;
بھرتی: 0 ;
}
ہیڈر {
پس منظر- رنگ : #2f4f4f;
پیڈنگ: 20px؛
متن- سیدھ میں لانا : مرکز
رنگ : سفید؛
}
کنٹینر- کلاس {
ڈسپلے: فلیکس؛
جواز پیش کرنا- مواد : اسپیس کے درمیان
پیڈنگ: 20px؛
}
کالم {
flex: 0 1 کیلک ( پچاس % - 10px ) ;
سرحد : 1px ٹھوس سبز؛
پس منظر- رنگ : سفید؛
box-sizing: بارڈر باکس؛
پیڈنگ: 20px؛
}
@ میڈیا ( زیادہ سے زیادہ چوڑائی : 768px ) {
کنٹینر- کلاس {
flex-direction: column;
}
کالم {
flex: 0 1 100 %;
مارجن نیچے: 20px؛
}
}آؤٹ پٹ
میڈیا استفسار کو لاگو کرنے کے بعد ویب صفحہ کا آؤٹ پٹ یہ ہے۔ یہ آؤٹ پٹ ایک دو کالم جوابی ترتیب ہے:
جب بھی سکرین موبائل کے لیے میڈیا استفسار کا استعمال کرتے ہوئے مخصوص جہتوں کو پورا کرتی ہے، یہ ایک کالم لے آؤٹ میں بدل جاتی ہے:
نتیجہ
موبائل آلات کے لیے میڈیا کے سوالات کو لاگو کرنے کے لیے، پہلے، ' ویو پورٹ ' میں ' سر سیکشن پھر، موبائل ڈیزائن کے لیے مخصوص CSS لکھیں۔ اس کے بعد، '@media' ٹیگ کا استعمال کرتے ہوئے اور موبائل اسکرین کا سائز بتا کر میڈیا سوال شامل کریں۔ مثال کے طور پر، ٹیبلیٹ کے لیے 768px اور موبائل فون کے لیے 480px کی وضاحت کریں۔ اس مضمون میں موبائل آلات کے لیے میڈیا کے سوالات کو لاگو کرنے کے طریقہ کار کی وضاحت کی گئی ہے۔