رول media@ در CSS

@media at-rule

media@ در CSS به عنوان بخشی از ساختارِ استایل های CSS تلقی می شود. توسط این rule می توان بر حسب رسانۀ ارائه محتوا (مثل دستگاهای تصویری دیجیتال یا پرینتر) و یا تنظیماتی مبتنی بر اندازه مشخصی از مرورگر، استایل های CSS مورد نظر را به عناصرِ مشخص اعمال کرد.

نحوه نوشتار

@media (max-width: 568px) {
   p {
      color: orange;
      font-size: 13px;
   }
}
@media screen and (min-with: 996px) {
    section {
       background-color: lightgreen;
       padding: .5rem 1rem;
       margin-top: 15px;
    }
}

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

استفاده از media query (مدیا کوئری) به عنوان یک تکنیک رایج در طراحی ریسپانسیو وب بشمار می رود. همچنین توسط آن می توانید استایل های مشخصی را برای انواع مختلفی از رسانه خروجی را در نظر گرفت.

انواع مدیا

all​

برای انواع مدیا استفاده می شود. این مقدار پیشفرض است.

print​

برای پرینترها استفاده می شود.

screen​

برای کامپیوترها، تبلت ها و تلفنهای هوشمند استفاده می شود.

/* رنگ پس زمینه در پرینت قرمز میشود */
@media print {
   body {
      background-color: red;
   }
}

/* رنگ پس زمینه در دستگاه های تصویری و هوشمند قرمز میشود */
@media screen {
   body {
      background-color: red;
   }
}

با استفاده از کلیدواژه and میتوان ترکیبی از امکانهای مختلف را ایجاد کرد. در مثال زیر اگر عرض مرورگر بین 350px و 550px باشد، رنگ پس زمینه آبی می شود.

@media (min-width: 350px) and ( max-width: 550px ) {
   body {
      backgoround-color: blue;
   }
}

min-width و max-width

min-width حداقل عرض مرورگر را مشخص می کند. بدین ترتیب استایل های CSS تنها در صورتی به عناصر مورد نظر اعمال خواهند شد که عرض مرورگر بیشتر از مقدار داده شده به min-width باشد.

@media (min-width: 768px) {
   .container {
       padding: 15px 45px;
   }
}

max-width نیز حداکثرِ عرض مرورگر را مشخص می کند. بدین ترتیب٬ استایل های CSS تنها در صورتی به عناصر مورد نظر اعمال خواهند شد که عرض مرورگر کمتر از مقدار داده شده به max-width باشد.

@media (max-width: 768px) {
   .container {
       padding: 15px 45px;
   }
}

پشتیبانی مرورگرها
تمام مرورگرها از این at-rule پشتیبانی می کنند.