طراحی وب ریسپانسیو - جستجوهای رسانه‌ای

میڈیا کوئری کیا ہے؟

میڈیا کوئری سی ایس ایس میں داخل کی گئی ایک سی ایس ایس تکنیک ہے۔

فقط کسی بخصوص شرط کی تکمیل کے بعد، اس کا استعمال کیا جائے گا @media قوانین کا استعمال کرکے سی ایس ایس کی اپنے کیوئری بلاک کو حوالہ دینا ہے۔

مثال

جب براؤزر ونڈو 600px یا اس سے کم ہوتی ہے تو، پس منظر کا رنگ کیمپ کا رنگ کیا جائے:

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

خودش امتحان کن

بریک پوائنٹ شامل کریں

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

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


ڈیسک ٹاپ کمپیوٹر

موبائل فون

768px پر میڈیا کوئری کا استعمال کرکے بریک پوائنٹ شامل کریں:

مثال

جب اسکرین (براؤزر ونڈو) 768px سے کم ہوتی ہے تو، ہر سطر کی چوڑائی 100% ہونی چاہیے:

/* دسائن کے لئے کسی بھی ڈیسک ٹاپ ڈیوائز: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
  /* موبائل کے لئے: */
  [class*="col-"] {
    width: 100%;
  }
}

خودش امتحان کن

موبائل پرنسپل ڈیزائن کو ہمیشہ پہل کریں

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

یہ معنات ہے کہ ہمیں سی ایس ایس میں کچھ بہتریاں لگانی ہوں گی۔

جب چوڑائی 768px سے کم ہوتی ہے تو، ہمیں ڈیزائن کو تبدیل کرنا چاہیے، نہ کہ چوڑائی کو تبدیل کرنا۔ اس طرح سے ہم نے 'موبائل پرنسپل' ڈیزائن کا کام کیا ہے:

مثال

/* موبائل کے لئے: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  /* دسکٹاپ کے لئے: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

خودش امتحان کن

ایک اور بریک پوائنٹ

آپ کسی بھی تعداد کا بریک پوائنٹ شامل کرسکتے ہیں۔

ہم تبلٹ اور موبائل فون کے درمیان ایک بریک پوائنٹ بھی شامل کریں گے۔


ڈیسک ٹاپ کمپیوٹر

تابلت

موبائل فون

اس لئے، ہم نے ایک میڈیا کوئری (600 پیکسل میں) اور 600 پیکسل سے زیادہ (لیکن 768 پیکسل سے کم) اپنے دسائن میں ایک نئی کلاسوں کا گروپ اضافہ کیا ہے:

مثال

لطفاً یقین رکھیجئے کہ دو جینت کلاس تقریباً یکساں ہیں، یقیناً کی فرق نام (col- اور col-s-) میں رہتی ہے:}}

/* موبائل کے لئے: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* تابلت کے لئے: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* دسکٹاپ کے لئے: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

دو جینت حصوں کا وجود کچھ عجیب لگتا ہے، لیکن یہ ہم کو ایچ تی ایم ایل کا استعمال کرکے ہر پل کی نقاط میں کیا ہوگا اس کا فیصلہ کرنے کا موقع فراہم کرتا ہے:

HTML مثال

دسک ٹاپ کے لئے:

پہلا اور تیسرا حصہ 3 ستون پر منتشر ہوں گے۔ درمیان کا حصہ 6 ستون پر منتشر ہوگا.

تابلت کے لئے:

پہلی حصہ 3 ستون پر منتشر ہوگا، دوسری حصہ 9 ستون پر منتشر ہوگی، تیسرا حصہ پہلے دو حصوں کے نیچے دکھایا جائے گا اور 12 ستون پر منتشر ہوگا:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

خودش امتحان کن

نقاط برش دستگاه‌های معمول

صفحه‌ها و دستگاه‌های مختلف با ارتفاع و عرض متفاوت بی‌شمار هستند، بنابراین ایجاد یک نقاط برش دقیق برای هر دستگاه دشوار است. برای سادگی، می‌توانید این پنج گروه را هدف قرار دهید:

مثال

/* دستگاه‌های بسیار کوچک (تلفن‌ها، 600px و کمتر) */
@media only screen and (max-width: 600px) {...} 
/* دستگاه‌های کوچک (تبلت‌های عمودی و تلفن‌های بزرگ، 600 پیکسل و بالاتر) */
@media only screen and (min-width: 600px) {...} 
/* دستگاه‌های متوسط (تبلت‌های افقی، 768 پیکسل و بالاتر) */
@media only screen and (min-width: 768px) {...} 
/* دستگاه‌های بزرگ (لپ‌تاپ‌ها/دسکتاپ‌ها، 992px و بالاتر) */
@media only screen and (min-width: 992px) {...} 
/* دستگاه‌های بزرگ (لپ‌تاپ‌های بزرگ و دسکتاپ‌ها، 1200px و بالاتر) */
@media only screen and (min-width: 1200px) {...}

خودش امتحان کن

مسیر: تصویر / مناظر

جستجوی رسانه همچنین می‌تواند برای تغییر چیدمان صفحه بر اساس مسیر مرورگر استفاده شود.

می‌توانید مجموعه‌ای از ویژگی‌های CSS را تنظیم کنید که تنها زمانی اعمال می‌شوند که عرض پنجره مرورگر بزرگتر از ارتفاع آن باشد، که به آن "حالت افقی" گفته می‌شود:

مثال

اگر حالت مسیر (landscape mode) باشد، پس زمینه وب‌سایت به رنگ آبی روشن خواهد بود:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

خودش امتحان کن

با جستجوی رسانه عناصر را مخفی کنید

یکی از کاربردهای رایج جستجوی رسانه برای مخفی کردن عناصر در اندازه‌های مختلف صفحه نمایش است:

مثال

/* اگر سایز اسکرین 600 پیکسل یا کمتر باشد، این عنصر را مخفی کنید */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

خودش امتحان کن

با جستجوی رسانه فونت را تغییر دهید

شما همچنین می‌توانید از جستجوی رسانه برای تغییر اندازه فونت عناصر در اندازه‌های مختلف صفحه نمایش استفاده کنید:

مثال

/* اگر اسکرین سایز 601px یا بزرگتر باشد، font-size <div> را به 80px تنظیم کنید */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* اگر اندازه صفحه نمایش 600px یا کمتر باشد، font-size <div> را به 30px تنظیم کنید */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

خودش امتحان کن

مرجع CSS @media

برای توضیحات کامل همه نوع‌های رسانه‌ها و ویژگی‌ها/عبارات در CSS مرجع بخوانید @media قوانین.