
ریسپانسیو در لغت به معنای واکنش گرا می باشد . و این در طراحی وب به این معنی است که قالب سایت و صفحه های وب برای دستگاههای با رزولیشن مختلف واکنش نشان دهند .
با پیشرفت تکنولوژی و روی کار آمدن موبایلهای هوشمند و تبلتها ، مانیتور های رزولیشن بالا و حتی تلوزیونهای دارای مرورگر اینترنتی ، این خلاء ایجاد شده که سایت طراحی شده دارای ابعادی می باشد که بسیار کوچک به نظر می رسد و برای دیدن مطلبی در سایت باید در آن قسمت زوم کرد ...
با بکار گیری css3 این مشکل بر طرف شده و حالا میتوان سایتهایی در ابعاد مختلف و برای رزولیشن های مختلف طراحی طراحی کرد.
در css3 این کار توسط مدیا کوئری ها امکان پذیر است.
مدیا کوئری چیست ؟
مدیا کوئری ها عباراتی هستند که از دو بخش تشکیل می شوند:
بخش اول نوع دستگاه و بخش دوم مشخصات دستگاه را بررسی می کند . اگر حاصل عبارت درست یا TRUE باشد استایل مربوطه اجرامی شود و اگر غلط یا FALSE باشد از مدیا کوئری صرفنظر می شود .
سینتکس مدیا کوئری :
@media not/only and (media feature) { css-dode; }
مدیا کوئری ها چه نوع دستگاه هایی را شناسایی می کنند :
1- Print پرینتر ها
2- screen مانیتور ها، تبلت ها و گوشی های موبایل
3- speech دستگاه هایی که متن صفحه را به صدا تبدیل می کنند
عملگرها در مدیاکوئری ها :
1- not حاصل عبارت غلط باشد مدیاکوئری اجرا می شود
2- only باعث اعمال نشدن دستورات مدیاکوئری در مرورگرهای قدیمی می شود.
3- and اگر حاصل دوطرف این عملگر درس باشد مدیاکوئری اجرا می شود .
برخی از ویژگیهای دستگاه ها که مدیاکوئری از آنها پشتیبانی می کند :
1- color
2- color-index
3-device-width
4- device-height
5- height
6- max-height
7- min-height
8- widht
9- max-width
10- min-width
پایان بخش یکم