ریسپانسیو ویب پیج ڈیزائن - میڈیا کوئری

ਮੀਡੀਆ ਕਿਊਰੀ ਕੀ ਹੈ?

ਮੀਡੀਆ ਕਿਊਰੀ ਸੀਐੱਸਐੱਸ3 ਵਿੱਚ ਇੱਕ ਸੀਐੱਸਐੱਸ ਤਕਨੀਕ ਹੈ。

ਸਿਰਫ਼ ਉਹ ਸਥਿਤੀਆਂ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਸ਼ਰਤਾਂ ਪੂਰੀਆਂ ਹੋਣ @media ਰੂਲਾਂ ਨਾਲ ਸੀਐੱਸਐੱਸ ਸਮੱਗਰੀ ਦੇ ਅਤਿਰਿਕਤ ਸਮੱਗਰੀ ਨੂੰ ਸੂਚੀਬੱਧ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

مثال

ਜਦੋਂ ਬਰਾਉਜ਼ਰ ਵਿੰਡੋ 600px ਜਾਂ ਘੱਟ ਹੋਵੇਗਾ ਤਾਂ ਪਿੱਨ ਰੰਗ ਹਲਕੇ ਨੀਲਾ ਹੋਵੇਗਾ:

@media only screen and (max-width: 600px) {
  بادی {
    بیک گراؤنڈ کلر: لائٹ بلو;
  }
}

خود کو کچھ کریئٹ کریئے

ਬੈਕਟਾਪ ਜੋੜੋ

ਇਸ ਟਿੂਟੋਰੀਅਲ ਵਿੱਚ ਪਹਿਲਾਂ ਅਸੀਂ ਇੱਕ ਸਾਈਟ ਬਣਾਈ ਹੈ ਜਿਸ ਵਿੱਚ ਸਤੰਭ ਅਤੇ ਪਟੜੀਆਂ ਹਨ, ਪਰ ਇਹ ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਸਾਈਟ ਛੋਟੇ ਸਕਰੀਨ 'ਤੇ ਬਹੁਤ ਚੰਗੀ ਤਰ੍ਹਾਂ ਨਹੀਂ ਦਿਖਾਈ ਹੈ。

ਮੀਡੀਆ ਕਿਊਰੀ ਤੁਹਾਨੂੰ ਮਦਦ ਕਰ ਸਕਦੀ ਹੈ।ਅਸੀਂ ਇੱਕ ਬੈਕਟਾਪ ਜੋੜ ਸਕਦੇ ਹਾਂ ਜਿਸ ਵਿੱਚ ਡਿਜ਼ਾਇਨ ਦੇ ਕੁਝ ਹਿੱਸੇ ਬੈਕਟਾਪ ਦੇ ਦੋਵੇਂ ਪਾਸੇ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਤਰੀਕੇ ਨਾਲ ਦਿਖਾਏ ਜਾਣਗੇ。


ਡੈਸਕਟਾਪ ਕੰਪਿਊਟਰ

ਮੋਬਾਈਲ ਫੋਨ

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%;
  }
}

خود کو کچھ کریئٹ کریئے

ਹਮੇਸ਼ਾ ਮੋਬਾਈਲ ਪਹਿਲੇ ਡਿਜ਼ਾਇਨ

ਮੋਬਾਈਲ ਪਹਿਲੇ (Mobile First) ਇਹ ਹੁੰਦਾ ਹੈ ਕਿ ਅਸੀਂ ਟੇਬਲੇਟ ਜਾਂ ਕਿਸੇ ਹੋਰ ਉਪਕਰਣ ਲਈ ਡਿਜ਼ਾਇਨ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਮੋਬਾਈਲ ਉਪਕਰਣ ਲਈ ਡਿਜ਼ਾਇਨ ਕਰਦੇ ਹਾਂ (ਇਹ ਪੂਰੇ ਪੰਨੇ ਨੂੰ ਛੋਟੇ ਉਪਕਰਣਾਂ 'ਤੇ ਤੇਜ਼ੀ ਨਾਲ ਦਿਖਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ)。

ਇਹ ਮਤਲਬ ਹੈ ਕਿ ਅਸੀਂ ਸੀਐੱਸਐੱਸ ਵਿੱਚ ਕੁਝ ਸੁਧਾਰ ਕਰਨਾ ਹੋਵੇਗਾ。

ਜਦੋਂ ਚੌਦਾਮੰਡੀ ਕੋਟਾ 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 ਦੇ ਨਾਲ ਕੀ ਹਰ ਵਿਚਕਾਰ ਲਈ ਕੋਲਾਂ ਕੀ ਹੋਵੇਗਾ ਤੇਜ਼ੀ ਨਾਲ ਤੈਅ ਕਰੀਏ:

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) {...}

خود کو کچھ کریئٹ کریئے

سمت: انسانی چہرہ / مناظر

میڈیا کوئریز بروسر کی سمت کی بنیاد پر پیج کی بچار بھی بدل سکتا ہے.

آپ کسی بھی سی ایس ایس کی گروپ کو سٹپ کرسکتے ہیں، جو صرف بروسر کی وائڈتھ کو بلندی سے زیادہ ہونے پر قابل استعمال ہو، جو کہ 'لینس مود' کہلاتا ہے:

مثال

اگر سمت کا مود لینس مود (لینس مود) ہو، تو ویب سائٹ کا باسک گراؤنڈ پیلی بلو رکھا جائے:

@media only screen and (orientation: landscape) {
  بادی {
    بیک گراؤنڈ کلر: لائٹ بلو;
  }
}

خود کو کچھ کریئٹ کریئے

میڈیا کوئریز سے عنصر پوشانا

میڈیا کوئریز کا ایک اور مشہور استعمال، مختلف سکرین سائز پر عناصر کو پوشانا ہے:

مثال

/* اگر سکرین سائز 600 پیکسل یا کم ہو، اس عنصر کو پوشا لیجئے */
@media only screen and (max-width: 600px) {
  div.example {
    دسپلے: ناشناس;
  }
}

خود کو کچھ کریئٹ کریئے

میڈیا کوئریز سے فونٹ بدلنا

آپ کسی بھی مختلف سکرین سائز پر عناصر کی فونٹ سائز بدلنے کے لئے میڈیا کوئریز استعمال کرسکتے ہیں:

مثال

/* اگر سکرین سائز 601px یا بہتر ہو، <div> کا font-size 80px رکھیجئے */
@media only screen and (min-width: 601px) {}}
  div.example {
    font-size: 80px;
  }
}
/* اگر اسکرین سائز 600px یا کم ہو، تو <div> کا font-size 30px رکھیجئے */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

خود کو کچھ کریئٹ کریئے

CSS @media مراجع

تمام میڈیا کی نوعیتوں اور خصوصیات/عبارات کا مکمل مراجع، CSS مراجع میں @media قوانین کو دیکھئے.