آموزش مدیا کوئری ها(media queries) در CSS

مدیا کوئری ها در CSS به ما امکان می دهند تا استایل ها را بسته به ویژگی های یک دستگاه یا محیط نمایش صفحه ی وب، اعمال کنیم. استفاده از مدیا کوئری ها برای ایجاد صفحات وب واکنشگرا ضروری است. برای اضافه کردن مدیا کوئری ها به برگه ی استایل، از دستور @media استفاده می شود. 

شیوه ی نوشتاری یا سینتکس مدیا کوئری ها

یک مدیا کوئری، شامل یک نوعِ مدیا(media-type) و یک یا چند خاصیتِ مدیا(media-features) می باشد که دارای ارزش های true یا false می باشند. 

@media [not] media-type and (media-feature: value) and (media-feature: value) {
  /* دستورات سی اس اس که باید اعمال شوند */
} 

استفاده از نوعِ مدیا(media-type) اختیاری است. اما اگر از not استفاده کنیم، باید یک نوع مدیا را نیز مشخص کنیم. نتیجه ی یک مدیا کوئری true می شود، اگر نوع مدیای(media-type) مشخص شده با نوع دستگاه(type of device) تطابق داشته باشد و ارزش تمام خاصیت های مدیا(media-features) برابر با true باشد. وقتی که ارزش یک مدیا کوئری true باشد، استایل های مربوطه اعمال می شوند و از قوانین آبشاری عادی(normal cascading rules) پیروی می کنند. 

معنی کلمات not و and 

not : این کلمه ی کلیدی اختیاری، معنای کل مدیا کوئری را برعکس می کند. 

and : این کلمه ی کلیدی، یک نوع مدیا(media-type) و یک یا چند خاصیت مدیا(media-features) را ترکیب می کند. 

نوع مدیا(Media Type) در CSS

مقدار اختیاریِ نوع مدیا(media type)، نوع رسانه ای که استایل ها برای آن تعریف شده اند را مشخص می کند. اگر نوع مدیا را مشخص نکنیم، مقدار آن برابر با all در نظر گرفته خواهد شد. 

خاصیت های مدیا(Media Features) در CSS

خاصیت مدیا(media feature) یک ویژگی خاص از دستگاه را مشخص می کند. در جدول زیر، برخی از خاصیت های مدیای متداول توضیح داده شده اند:

چند مثال در زمینه ی مدیا کوئری ها در CSS

ما در اینجا، از یک مدیا کوئری برای تغییر رنگ پس زمینه ی(background-color) بدنه یا body به lightgreen استفاده کرده ایم؛ شرط این کار این است که عرض منطقه دید(viewport) برابر با 480px یا بیشتر باشد:

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

در اینجا از یک مدیا کوئری برای تغییر رنگ پس زمینه(background-color) ی body به lightgreen استفاده شده است، در صورتی که عرض منطقه دید(viewport) بین 480px و 768px باشد:

@media screen and (min-width: 480px) and (max-width: 768px) {
  body {
    background-color: lightgreen;
  }
}

منبع: https://www.w3schools.com/css