@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
پشتیبانی می کنند.