مدیا کوئری

مدیا کوئری  یک ماژول از نسخه سوم زبان CSS می‌باشد، که این امکان را فراهم می‌آورد تا بتوان در طراحی وب، طرح‌ها و وب سایت‌ها را بر اساس مشخصات رسانه‌ای که در آن نمایش می‌یابند، سازگار کرد. وضوح صفحه (به انگلیسی: Screen Resolution) مهم‌ترین این مشخصه‌ها می‌باشد.
این قابلیت ابتدا در سال ۲۰۰۱ به صورت پیش‌نویس درآمد و سپس در ژوئن ۲۰۱۲ توسط کنسرسیوم جهانی وب به عنوان یک استاندارد توصیه شده به تأیید رسید.

یک مدیا کوئری، از یک «نوع رسانه» (به انگلیسی: Media Type) و یک یا چند عبارت، که شامل قابلیت‌های رسانه مورد نظر هستند تشکیل شده‌است. نتیجه کلی یک مدیا کوئری یا درست (True) یا غلط (False) خواهد بود که در صورت درست بودن دستورهای مربوط به کوئری به صفحه وب اعمال خواهد شد.

روش استفاده 
برای استفاده از مدیا کوئری‌ها کافیست با توجه به نمونه کد زیر، تمام دستورهای CSS را داخل آکولاد مربوط به مدیا کوئری قرار دهیم.
@media all and (min-width:500px) {
    body{
        width: 100%;
    }
}
مدیا کوئری بالا، برای دستگاه‌هایی اعمال می‌شود که حداقل عرض صفحه آن‌ها ۵۰۰ پیکسل باشد.

نوع رسانه (Media Type) 
نوع رسانه را می‌توان در بخش سر (Head) یک فایل HTML با استفاده از خصیصه media از تگ  مشخص کرد. این خصیصه مشخص می‌کند که برای چه نوع رسانه‌ای استایل مورد نظر اعمال خواهد شد. در مستندات شیوه‌نامهٔ آبشاری، نوع‌های زیر به عنوان انواع رسانه‌های قابل قبول شناخته شده‌است:
 braille - بریل
 embossed
 handheld - دستگاه‌های قابل حمل
 print - برای چاپ
 projection - دستگاه‌های پروژکتور
 screen
 speech
 tty
 tv

به علاوه با استفاده از نوع "all" می‌توان تمام رسانه‌های موجود را هدف قرار داد به این معنی که استایل مورد نظر برای تمامی رسانه‌های موجود اعمال خواهد شد.

منابع 

 W3C - Media Queries recommendation 19 June 2012
 W3C - CSS specs> Media Queries
 Examples of Media Queries usage
 Sitepoint - Media Queries

برگه‌های سبک آبشاری
طراحی وب واکنش‌گرا