مدیا کوئری
مدیا کوئری (به انگلیسی: Media Queries) یک ماژول از نسخه سوم زبان CSS میباشد، که این امکان را فراهم میآورد تا بتوان در طراحی وب، طرحها و وب سایتها را بر اساس مشخصات رسانهای که در آن نمایش مییابند، سازگار کرد. وضوح صفحه (به انگلیسی: Screen Resolution) مهمترین این مشخصهها میباشد. این قابلیت ابتدا در سال ۲۰۰۱ به صورت پیش نویس در آمد و سپس در ژوئن ۲۰۱۲ توسط کنسرسیوم جهانی وب به عنوان یک استاندارد توصیه شده به تأیید رسید.
یک مدیا کوئری، از یک «نوع رسانه» (به انگلیسی: Media Type) و یک یا چند عبارت، که شامل قابلیتهای رسانه مورد نظر هستند تشکیل شده است. نتیجه کلی یک مدیا کوئری یا درست (True) و یا غلط (False) خواهد بود که در صورت درست بودن دستورهای مربوط به کوئری به صفحه وب اعمال خواهد شد.
روش استفاده [ویرایش]
برای استفاده از مدیا کوئری ها کافیست با توجه به نمونه کد زیر، تمام دستورهای CSS را داخل آکولاد مربوط به مدیا کوئری قرار دهیم.
@media all and (min-width:500px) { body{ width: 100%; } }
مدیا کوئری بالا، برای دستگاه هایی اعمال میشود که حداقل عرض صفحه آنها 500 پیکسل باشد.
نوع رسانه (Media Type) [ویرایش]
نوع رسانه را میتوان در بخش سر (Head) یک فایل HTML با استفاده از خصیصه media از تگ <link> مشخص کرد. این خصیصه مشخص میکند که برای چه نوع رسانهای استایل مورد نظر اعمال خواهد شد. در مستندات CSS2، نوعهای زیر به عنوان انواع رسانههای قابل قبول شناخته شده است:[۱]
- braille - بریل
- embossed
- handheld - دستگاههای قابل حمل
- print - برای چاپ
- projection - دستگاههای پروژکتور
- screen
- speech
- tty
- tv
به علاوه با استفاده از نوع "all" میتوان تمام رسانه های موجود را هدف قرار داد به این معنی که استایل مورد نظر برای تمامی رسانههای موجود اعمال خواهد شد.[۲]
منابع [ویرایش]
- ↑ "Media Queries". World Wide Web Consortium. http://www.w3.org/TR/css3-mediaqueries/#background. Retrieved November 2012.
- ↑ "Media Queries". World Wide Web Consortium. http://www.w3.org/TR/css3-mediaqueries/. Retrieved November 2012.
