ریسپانسیو در لغت به معنای واکنش گرا می باشد . و این در طراحی وب به این معنی  است که قالب سایت و صفحه های وب برای دستگاههای با رزولیشن مختلف واکنش نشان دهند .

با پیشرفت تکنولوژی و روی کار آمدن موبایلهای هوشمند و تبلتها ، مانیتور های رزولیشن بالا و حتی تلوزیونهای دارای مرورگر اینترنتی ، این خلاء ایجاد شده که سایت طراحی شده دارای ابعادی می باشد که بسیار کوچک به نظر می رسد و برای دیدن مطلبی در سایت باید در آن قسمت زوم کرد ...

با بکار گیری 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

پایان بخش یکم