نیا CSS میڈیا سوال رینج کا نحو

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

لہذا، کہتے ہیں کہ ہم ایک پرنٹ شدہ دستاویز پر مخصوص سی ایس ایس اسٹائل لاگو کرنا چاہتے ہیں:

@media print {
  .element {
    /* Style away! */
  }
}

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

/* When the viewport width is at least 30em... */
@media screen and (min-width: 30em) {
  .element {
    /* Style away! */
  }
}

نوٹس and اس میں؟ یہ ایک آپریٹر ہے جو ہمیں بیانات کو یکجا کرنے کی اجازت دیتا ہے۔ اس مثال میں، ہم نے ایک شرط کو جوڑ دیا کہ میڈیا کی قسم a ہے۔ screen اور یہ ہے min-width خصوصیت مقرر کی گئی ہے۔ 30em (یا اس سے اوپر). ویو پورٹ سائز کی ایک حد کو نشانہ بنانے کے لیے ہم وہی کام کر سکتے ہیں:

/* When the viewport width is between 30em - 80em */
@media screen and (min-width: 30em) and (max-width: 80em) {
  .element {
    /* Style away! */
  }
}

اب وہ طرزیں کسی ایک چوڑائی کے بجائے ویو پورٹ کی چوڑائی کی واضح رینج پر لاگو ہوتی ہیں!

لیکن میڈیا سوالات کی سطح 4 کی تفصیلات نے عام ریاضیاتی موازنہ آپریٹرز کا استعمال کرتے ہوئے ویو پورٹ کی چوڑائیوں کی ایک حد کو نشانہ بنانے کے لیے ایک نیا نحو متعارف کرایا ہے۔ <, >، اور = - جو کم کوڈ لکھتے ہوئے نحوی طور پر زیادہ معنی رکھتا ہے۔

آئیے کھودتے ہیں کہ یہ کیسے کام کرتا ہے۔

نئے موازنہ آپریٹرز

یہ آخری مثال اس بات کی ایک اچھی مثال ہے کہ ہم نے شرائط کو یکجا کر کے کس طرح "جعلی" حدود کو ترتیب دیا ہے۔ and آپریٹر میڈیا سوالات کی سطح 4 کی تفصیلات میں بڑی تبدیلی یہ ہے کہ ہمارے پاس نئے آپریٹرز ہیں جو اقدار کو یکجا کرنے کے بجائے موازنہ کرتے ہیں:

• < اگر کوئی قدر ہے تو اندازہ کرتا ہے۔ سے بھی کم ایک اور قدر
• > اگر کوئی قدر ہے تو اندازہ کرتا ہے۔ سے زیادہ ایک اور قدر
• = اگر کوئی قدر ہے تو اندازہ کرتا ہے۔ برابر کسی اور قدر کے لیے
• <= اگر کوئی قدر ہے تو اندازہ کرتا ہے۔ t سے کم یا برابرo ایک اور قدر
• >= اگر کوئی قدر ہے تو اندازہ کرتا ہے۔ t سے زیادہ یا برابرo ایک اور قدر

یہاں یہ ہے کہ ہم نے ایک میڈیا استفسار کیسے لکھا ہے جو براؤزر کے طرز پر لاگو ہوتا ہے۔ 600px چوڑا یا زیادہ:

@media (min-width: 600px) {
  .element {
    /* Style away! */
  }
}

یہاں یہ ہے کہ موازنہ آپریٹر کا استعمال کرتے ہوئے ایک ہی چیز کو لکھنا کیسا لگتا ہے:

@media (width >= 600px) {
  .element {
    /* Style away! */
  }
}

ویو پورٹ کی چوڑائی کی حد کو نشانہ بنانا

اکثر جب ہم CSS میڈیا سوالات لکھتے ہیں، تو ہم تخلیق کرتے ہیں جسے a کہا جاتا ہے۔ توڑ مقام - ایک ایسی حالت جہاں ڈیزائن "بریک" ہوتا ہے اور اسے ٹھیک کرنے کے لیے اسٹائل کا ایک سیٹ لاگو ہوتا ہے۔ ایک ڈیزائن میں بریک پوائنٹس کا ایک گروپ ہوسکتا ہے! اور وہ عام طور پر دو چوڑائی کے درمیان ویو پورٹ پر مبنی ہوتے ہیں: بریک پوائنٹ کہاں سے شروع ہوتا ہے اور کہاں بریک پوائنٹ ختم ہوتا ہے۔

یہ ہے کہ ہم نے اسے کس طرح استعمال کیا ہے۔ and دو بریک پوائنٹ اقدار کو یکجا کرنے کے لیے آپریٹر:

/* When the browser is between 400px - 1000px */
@media (min-width: 400px) and (max-width: 1000px) {
  /* etc. */
}

آپ کو بخوبی اندازہ ہونا شروع ہو جاتا ہے کہ جب ہم بولین کو چھوڑ دیتے ہیں تو میڈیا سوال لکھنا کتنا مختصر اور آسان ہوتا ہے۔ and آپریٹر نئے رینج موازنہ نحو کے حق میں:

@media (400px <= width <= 1000px) {
  /* etc. */
}

بہت آسان، ٹھیک ہے؟ اور یہ بالکل واضح ہے کہ یہ میڈیا سوال کیا کر رہا ہے۔

براؤزر کی حمایت

یہ بہتر شدہ میڈیا استفسار کا نحو ابھی بھی اس تحریر کے ابتدائی دنوں میں ہے اور اس وقت اتنا وسیع پیمانے پر تعاون یافتہ نہیں ہے جتنا کہ اس نقطہ نظر کو یکجا کرتا ہے۔ min-width اور max-width. ہم قریب آ رہے ہیں، اگرچہ! اس مقام پر سفاری واحد بڑی ہولڈ آؤٹ ہے، لیکن اس کے لئے ایک کھلا ٹکٹ ہے کہ آپ پیروی کر سکتے ہیں۔

آئیے ایک مثال دیکھتے ہیں۔

یہاں ایک ترتیب ہے جو بڑی اسکرینوں کے لیے اچھی طرح سے موزوں ہے، جیسے ڈیسک ٹاپ:

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

یہ دیکھنے کے لیے کہ کیا ہو رہا ہے، یہاں یہ ہے کہ لے آؤٹ دو چھوٹے بریک پوائنٹس کے درمیان کیسے جواب دیتا ہے۔ پوشیدہ NAV فہرست بھی ظاہر ہو رہی ہے۔ title میں main میں اضافہ ہو جاتا ہے font-size.

یہ تبدیلی اس وقت شروع ہوتی ہے جب ویو پورٹ کی تبدیلیاں ایک میڈیا کی شرائط سے مماثل ہوتی ہیں:

/* Base styles (any screen size) */
header {
  display: flex;
  justify-content: center;
}

header ul {
  display: none;
}

.title p {
  font-size: 3.75rem;
}

/* When the media type is a screen with a width greater or equal to 768px */
@media screen and (width >= 768px) {
  header {
    justify-content: space-between;
  }

  header ul {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }

  .title p {
    font-size: 5.75rem;
  }
}

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

ٹھیک ہے، تو یہ نیچے موبائل آلات کے لیے بہت اچھا ہے۔ 768px اور اس کے برابر یا اس سے زیادہ دوسرے آلات کے لیے 768px. لیکن اس ڈیسک ٹاپ لے آؤٹ کا کیا ہوگا… ہم وہاں کیسے پہنچیں گے؟

جہاں تک لے آؤٹ جاتا ہے:

• ۔ main عنصر ایک 12 کالم گرڈ بن جاتا ہے۔
• تصویر پر ایک بٹن ظاہر ہوتا ہے۔
• کے سائز .title عنصر کا فونٹ بڑھتا ہے اور تصویر کو اوورلیپ کرتا ہے۔

یہ فرض کرتے ہوئے کہ ہم نے اپنا ہوم ورک کر لیا ہے اور یہ طے کر لیا ہے کہ یہ تبدیلیاں کہاں ہونی چاہئیں، ہم ان طرزوں کو لاگو کر سکتے ہیں جب ویو پورٹ width اس بریک پوائنٹ کے لیے شرط۔ ہم یہ کہنے جا رہے ہیں کہ بریک پوائنٹ پر ہے۔ 1000px:

/* When the media type is a screen with a width greater or equal to 1000px  */
@media screen and (width >= 1000px) {
  /* Becomes a 12-column grid */
  main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 250px;
  }

  /* Places the .title on the grid */
  .title {
    grid-row: 1;
  }

  /* Bumps up the font-size */
  .title p {
    font-size: 7.75rem;
  }

  /* Places .images on the grid */
  .images {
    grid-row: 1 / span 2;
    align-self: end;
    position: relative;
  }

  /* Displays the button */
  .images .button {
    display: block;
    position: absolute;
    inset-block-end: 5rem;
    inset-inline-end: -1rem;
  }
}

اس کے ساتھ کھیلو:

کیوں نئے نحو کو سمجھنا آسان ہے۔

پایان لائن: موازنہ آپریٹر کی تمیز کرنا آسان ہے (مثال کے طور پر width >= 320px) کے مقابلے میں فرق بتانا ہے۔ min-width اور max-width کا استعمال کرتے ہوئے and آپریٹر کے درمیان نزاکت کو دور کرکے min- اور max-، ہمارے پاس ایک سنگل ہے۔ width پیرامیٹر جس کے ساتھ کام کرنا ہے اور آپریٹرز ہمیں باقی بتاتے ہیں۔

ان نحو کے بصری اختلافات سے ہٹ کر، وہ قدرے مختلف چیزیں بھی کر رہے ہیں۔ استعمال کرنا min- اور max- ریاضیاتی موازنہ آپریٹرز کو استعمال کرنے کے مترادف ہے:

• max-width کے برابر ہے <= آپریٹر (مثال کے طور پر (max-width: 320px) ویسا ہی ہے جیسا (width <= 320px)).
• min-width کے برابر ہے >= آپریٹر (مثال کے طور پر (min-width: 320px) ویسا ہی ہے جیسا (width >= 320px)).

نوٹ کریں کہ دونوں میں سے کوئی بھی اس کے برابر نہیں ہے۔ > or < آپریٹرز

آئیے براہ راست میڈیا سوالات کی سطح 4 تفصیلات سے ایک مثال کھینچتے ہیں جہاں ہم بریک پوائنٹ کی بنیاد پر مختلف طرزوں کی وضاحت کرتے ہیں۔ 320px استعمال کرتے ہوئے ویو پورٹ کی چوڑائی میں min-width اور max-width:

@media (max-width: 320px) { /* styles for viewports = 320px */ }

میڈیا کے دونوں استفسارات اس شرط سے ملتے ہیں جب ویو پورٹ کی چوڑائی برابر ہو۔ 320px. بالکل وہی نہیں جو ہم چاہتے ہیں۔ ہم چاہتے ہیں یا تو ایک ہی وقت میں دونوں کے بجائے ان حالات میں سے ایک۔ ان مضمر تبدیلیوں سے بچنے کے لیے، ہم اس کی بنیاد پر استفسار میں ایک پکسل شامل کر سکتے ہیں۔ min-width:

@media (max-width: 320px){ /* styles for viewports = 321px */ }

جب کہ یہ اس بات کو یقینی بناتا ہے کہ جب ویو پورٹ کی چوڑائی 320px، کوئی بھی ویو پورٹ چوڑائی جو درمیان میں آتی ہے۔ 320px اور 321px اس کا نتیجہ ایک انتہائی چھوٹے زون کی صورت میں نکلے گا جہاں دونوں سوالوں میں سے کوئی بھی اسٹائل لاگو نہیں ہوتا ہے — ایک عجیب و غریب "غیر اسٹائل شدہ مواد کا فلیش" صورتحال۔

ایک حل یہ ہے کہ دوسرے موازنہ پیمانے کی قدر (اعشاریہ کے بعد کے اعداد) تک بڑھایا جائے۔ 320.01px:

@media (max-width: 320px) { /* styles for viewports = 320.01px */ }

لیکن یہ احمقانہ اور حد سے زیادہ پیچیدہ ہو رہا ہے۔ اسی لیے نئی میڈیا فیچر رینج کا نحو ایک زیادہ مناسب طریقہ ہے:

@media (width <= 320px) { /* styles for viewports  320px) { /* styles for viewports > 320px */ }

اپ ریپنگ

افف، ہم نے سی ایس ایس میڈیا سوالات میں ویو پورٹ کی چوڑائی کی حدود کو نشانہ بنانے کے لیے نئے نحو پر کافی حد تک احاطہ کیا ہے۔ اب جبکہ میڈیا سوالات کی سطح 4 کی تفصیلات نے نحو متعارف کرایا ہے اور اسے فائر فاکس اور کرومیم براؤزرز میں اپنایا گیا ہے، ہم نئے موازنہ آپریٹرز کو استعمال کرنے اور ان کے علاوہ دیگر رینج میڈیا خصوصیات کے ساتھ جوڑنے کے قابل ہونے کے قریب پہنچ گئے ہیں۔ width، طرح height اور aspect-ratio

اور یہ ان نئی خصوصیات میں سے صرف ایک ہے جسے لیول 4 کی تفصیلات نے متعارف کرایا ہے، a کے ساتھ سوالات کا ایک گروپ جو ہم صارف کی ترجیحات کی بنیاد پر کر سکتے ہیں۔. یہ وہاں ختم نہیں ہوتا! چیک کریں CSS میڈیا کے سوالات کے لیے مکمل گائیڈ کی ایک چپکے سے جھانکنے کے لئے میڈیا سوالات کی سطح 5 میں کیا شامل کیا جا سکتا ہے۔.