مدیا کوئری
مدیا کوئری (به انگلیسی: Media Queries) یک ماژول از نسخه سوم زبان CSS می‌باشد، که این امکان را فراهم می‌آورد تا بتوان در طراحی وب، طرح‌ها و وب سایت‌ها را بر اساس مشخصات رسانه‌ای که در آن نمایش می‌یابند، سازگار کرد. وضوح صفحه (به انگلیسی: Screen Resolution) مهم‌ترین این مشخصه‌ها می‌باشد. این قابلیت ابتدا در سال ۲۰۰۱ به صورت پیش‌نویس درآمد و سپس در ژوئن ۲۰۱۲ توسط کنسرسیوم جهانی وب به عنوان یک استاندارد توصیه شده به تأیید رسید.
یک مدیا کوئری، از یک «نوع رسانه» (به انگلیسی: Media Type) و یک یا چند عبارت، که شامل قابلیت‌های رسانه مورد نظر هستند تشکیل شده‌است. نتیجه کلی یک مدیا کوئری یا درست (True) یا غلط (False) خواهد بود که در صورت درست بودن دستورهای مربوط به کوئری به صفحه وب اعمال خواهد شد.
روش استفاده
برای استفاده از مدیا کوئری‌ها کافیست با توجه به نمونه کد زیر، تمام دستورهای CSS را داخل آکولاد مربوط به مدیا کوئری قرار دهیم.
@media all and (min-width:500px) {
body{
width: 100%;
}
}
مدیا کوئری بالا، برای دستگاه‌هایی اعمال می‌شود که حداقل عرض صفحه آن‌ها ۵۰۰ پیکسل باشد.
نوع رسانه (Media Type)
نوع رسانه را می‌توان در بخش سر (Head) یک فایل HTML با استفاده از خصیصه media از تگ <link> مشخص کرد. این خصیصه مشخص می‌کند که برای چه نوع رسانه‌ای استایل مورد نظر اعمال خواهد شد. در مستندات شیوه‌نامهٔ آبشاری، نوع‌های زیر به عنوان انواع رسانه‌های قابل قبول شناخته شده‌است:
- braille - بریل
- embossed
- handheld - دستگاه‌های قابل حمل
- print - برای چاپ
- projection - دستگاه‌های پروژکتور
- screen
- speech
- tty
- tv
به علاوه با استفاده از نوع "all" می‌توان تمام رسانه‌های موجود را هدف قرار داد به این معنی که استایل مورد نظر برای تمامی رسانه‌های موجود اعمال خواهد شد.