آموزش مدیا کوئری های ساده در CSS

 اجازه دهید قبل از اینکه تمام انواع مدیا کوئری ها را بررسی کنیم، نگاهی به برخی از قطعه کدهای ساده ی مدیا بیندازیم. فرض کنید که می خواهیم استایل های متفاوتی را برای  نشان دادن سایت بر روی پرده( projection یا پروجکشن) به وسیله ی پروژکتور تنظیم کنیم. بعنوان مثال، در زیر دو تکه کد CSS ساده را مشاهده می کنید:

h1 {color: maroon;}
@media projection {
  body {background: yellow;}
}

 در مثال بالا، عناصر h1 در تمام مدیاها به رنگ maroon در می آیند اما رنگ پس زمینه ی  عنصر body تنها در محیط  پروجکشن(projection ) به صورت زرد در می آید. ما می توانیم در یک برگه ی استایل، هر تعداد بلوک @media که بخواهیم داشته باشیم، البته هرکدام از آنها باید از توصیف گر(descriptor) مدیای مربوط به خود استفاده کند(در ادامه ی این فصل با جزئیات بیشتری مورد بحث قرار خواند گرفت). همچنین اگر بخواهید حتی می توانید تمام کدهای خود را در داخل یک بلوک @media قرار دهید. مانند زیر:

@media all {
 h1 {color: maroon;}
 body {background: yellow;}
}

اما چون اگر خط اول و آخر را حذف کنیم، نتیجه یکسان است، اهمیتی ندارد این کار را انجام دهیم.

 نکته: تو رفتگی کدهای نشان داده شده در این بخش، فقط به منظور تمیز نشان دادن کدها است. اما شما مجبور نیستید برای کدهای درون بلوک @media تو رفتگی ایجاد کنید، اما توصیه می شود برای خوانایی کدهای CSS این کار را انجام دهید. در کدهای بالا، در جایی که از کلمات projection  و all استفاده شده است، ما از مدیا کوئری استفاده کرده ایم.

 این کوئری ها برای اینکه مشخص کنند که قطعه کدهای CSS چه موقع باید به بخش های مختلف اعمال شوند، از یک سری کلمه استفاده می کنند که نوع مدیا را مشخص می کند، همچنین در داخل کوئری،  پارامترهای مدیا را نیز مشخص می کنیم(پارامترهایی مثل رزولوشن یا ارتفاع صفحه ی نمایش و غیره).

 در مقاله ی بعدی به بررسی انواع مدیا کوئری ها می پردازیم.

{module کمک نقدی به نویسنده}