ایچ ٹی ایم ایل اور سی ایس ایس میں میڈیا کے سوالات کو کس طرح استعمال کریں کہ جوابی ویب سائٹس بنائیں۔

اگر آپ ویب سائٹس/ویب ایپلی کیشنز تیار کرنا چاہتے ہیں تو جوابی ڈیزائن بنانے کا طریقہ جاننا آپ کی کامیابی کے لیے ضروری ہے۔

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

میڈیا کے سوالات کا استعمال اس بات کو یقینی بنانے کا بہترین طریقہ ہے کہ آپ کی ویب سائٹ/ویب ایپ بالکل اسی طرح ظاہر ہو جس طرح آپ ہر ڈیوائس پر چاہتے ہیں۔

قبول ڈیزائن کو سمجھنا۔

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

پکسلز کے بجائے ریم اور ایم یونٹس استعمال کرنا (px)
ہر ویب پیج کا ویو پورٹ/اسکیل سیٹ کرنا۔
میڈیا کے سوالات کا استعمال۔

میڈیا کے سوالات کیا ہیں؟

میڈیا استفسار CSS کی ایک خصوصیت ہے جسے CSS3 ورژن میں جاری کیا گیا۔ سی ایس ایس کے اس نئے فیچر کو متعارف کرانے کے ساتھ ہی کسی ویب ڈسپلے کے ڈسپلے کو ڈیوائس/سکرین کی اونچائی ، چوڑائی اور واقفیت (زمین کی تزئین یا پورٹریٹ موڈ) پر ایڈجسٹ کرنے کی صلاحیت حاصل ہوتی ہے۔

مزید پڑھیں: ضروری CSS3 پراپرٹیز چیٹ شیٹ۔

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

میڈیا سوالات کا استعمال

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

میڈیا سوالات کی ساخت

میڈیا استفسار کی ساخت کی مثال

  
@media only/not media-type and (expression){  
/*CSS code*/  
}

میڈیا استفسار کے عمومی ڈھانچے میں شامل ہیں:

میڈیا کی ورڈ۔
نہ صرف/صرف مطلوبہ الفاظ۔
میڈیا کی قسم (جو سکرین ، پرنٹ یا تقریر ہو سکتی ہے)
مطلوبہ الفاظ اور
ایک منفرد اظہار جو قوسین میں بند ہے۔
سی ایس ایس کوڈ کھلے اور بند گھوبگھرالی منحنی خطوط وحدانی کے جوڑے میں بند ہے۔

صرف مطلوبہ الفاظ کے ساتھ میڈیا استفسار کی مثال۔

  
@media only screen and (max-width: 450px){  
body{  
background-color: blue;  
}  
}

مندرجہ بالا مثال سی ایس ایس اسٹائل (خاص طور پر نیلے رنگ کا پس منظر کا رنگ) صرف ان ڈیوائس اسکرینوں پر لاگو ہوتی ہے جن کی چوڑائی 450px اور اس سے کم ہو۔ صرف مطلوبہ الفاظ کو مطلوبہ الفاظ سے تبدیل کیا جاسکتا ہے اور پھر میڈیا کے استفسار میں سی ایس ایس اسٹائل صرف پرنٹ اور تقریر پر لاگو ہوگا۔

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

ڈیفالٹ میڈیا استفسار کی مثال

  
/*design for smartphones*/  
@media(max-width: 450px){  
body{  
background-color: blue;  
}  
}

میڈیا کے سوالات کا تعین۔

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

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

بیرونی طریقہ کار میں بیرونی سی ایس ایس فائل میں میڈیا استفسار بنانا اور اسے ٹیگ کے ذریعے اپنی ایچ ٹی ایم ایل فائل سے جوڑنا شامل ہے۔

میڈیا کے سوالات کی حد۔

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

ڈیفالٹ میڈیا استفسار کوڈ جو ہمارے اوپر ہے اسمارٹ فونز (450px چوڑا اور اس سے کم) کو نشانہ بناتا ہے ، لہذا اگر آپ ٹیبلٹس کے لیے ایک مختلف پس منظر ترتیب دینا چاہتے ہیں تو آپ کو لگتا ہے کہ آپ اپنی پہلے سے موجود CSS فائل میں درج ذیل کوڈ شامل کر سکتے ہیں۔

ٹیبلٹ میڈیا استفسار کی مثال

  
/* design for tablets */  
 @media(max-width: 800px){  
 body{  
 background-color: red;  
 }  
 }

صرف ایک مسئلہ یہ ہے کہ ، ترجیح کی ترتیب کی وجہ سے ، ٹیبلٹس کا سرخ پس منظر کا رنگ ہوگا اور اسمارٹ فونز کا پس منظر بھی سرخ ہوگا کیونکہ 450px اور انڈر 800px سے کم ہے۔

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

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

رینج مثال کے ساتھ ٹیبلٹ میڈیا استفسار۔

  
 /* design for tablets */  
 @media(max-width: 800px) and (min-width:451){  
 body{  
 background-color: red;  
 }  
 }

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

لنک میڈیا کے سوالات۔

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

ٹیگ ایک HTML عنصر ہے جو بیرونی سٹائل شیٹ سے CSS اسٹائل درآمد کرنے کے لیے استعمال ہوتا ہے۔ اس ٹیگ میں میڈیا پراپرٹی ہے جو اسی طرح کام کرتی ہے جیسا کہ میڈیا کا استفسار CSS میں ہوتا ہے۔

لنک ٹیگ میں میڈیا سوالات کا استعمال مثال کے طور پر۔

  
  
  
  href='tablet.css'>

مندرجہ بالا کوڈ کو آپ کی HTML فائل کے ٹیگ میں رکھنا چاہیے۔ اب آپ کو تین علیحدہ سی ایس ایس فائلیں بنانے کی ضرورت ہے جس میں فائل کے نام main.css ، tablet.css ، اور smartphone.css ہیں - پھر وہ مخصوص ڈیزائن بنائیں جو آپ ہر ڈیوائس کے لیے چاہتے ہیں۔

مین فائل میں سٹائل 800px سے زیادہ چوڑائی والی تمام اسکرینز پر لاگو ہوگا ، ٹیبلٹ فائل میں سٹائل 450px اور 801px کے درمیان چوڑائی والی تمام اسکرینوں پر لاگو ہوگا ، اور اسمارٹ فون فائل میں سٹائل نیچے کی تمام اسکرینوں پر لاگو ہوگا 451px

مجھے اطلاع کیوں نہیں مل رہی؟

اب آپ کے پاس ذمہ دار ڈیزائن بنانے کے ٹولز ہیں۔

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

تصویری کریڈٹ: منفی جگہ/ پکسلز۔

بانٹیں بانٹیں ٹویٹ ای میل۔ CSS میں بیک گراؤنڈ امیج کیسے سیٹ کریں

سی ایس ایس ویب صفحات کو اسٹائل کرنے کا ایک طاقتور ذریعہ ہے۔ پس منظر کی تصویر لگانا سیکھنا آپ کو بہت سی ایس ایس کی بنیادی باتیں سکھاتا ہے۔

اگلا پڑھیں۔ متعلقہ موضوعات۔

پروگرامنگ۔
ویب سازی
ویب ڈیزائن
سی ایس ایس

مصنف کے بارے میں کدیشا کیان۔(21 مضامین شائع ہوئے)

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

Kadeisha Kean سے مزید

ہماری نیوز لیٹر کو سبسکرائب کریں

ٹیک ٹپس ، جائزے ، مفت ای بکس ، اور خصوصی سودوں کے لیے ہمارے نیوز لیٹر میں شامل ہوں!

سبسکرائب کرنے کے لیے یہاں کلک کریں۔