وبمستر مارکت مکانی برای یافتن مشتریان جدید

آموزش مدیا کوئری در css و کاربرد آنها در صفحات ریسپانسیو

اگر بخواهیم قالب واکنش گرا طراحی کنیم باید ابتدا با متا تگ viewport و مدیا کوئری ها آشنا شویم. در مقالات قبلی در مورد viewport توضحات کاملی ارائه شده و در این مقاله با مدیا کوئری ها آشنا می شویم.

مدیا کوئری چیست؟

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

مدیا کوئری ها عباراتی هستند که از دو بخش تشکیل می شوند، بخش اول نوع دستگاه و بخش دوم مشخصات دستگاه را بررسی می کند. اگر حاصل عبارت درست یا TRUE باشد استایل مربوط به مدیا کوئری که درون {} قرار دارد اجرا می شود و اگر حاصل عبارت غلط یا FALSE باشد از مدیا کوئری صرف نظر می شود.

سینتکس مدیا کوئری

@media not|only mediatype and (media feature) {
CSS-Code;
}

مدیا کوئری ها چه نوع دستگاههایی را شناسایی می کنند؟

  1. print -پرینترها
  2. screen - مانیتورها، تبلتها و گوشی های موبایل
  3. speech - برای دستگاههایی که متن صفحه را به صدا تبدیل می کنند

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

مدیا کوئری ها دستگاههای دیگری مانند braille، projection، tv و... را نیز پشتیبانی میکنند اما توصیه شده است که از آنها استفاده نکنید.

در مدیا کوئری ها می توان از کدام عملگرها استفاده کرد؟

  1. not اگر حاصل عبارت غلط باشد مدیا کوئری اعمال می شود
  2. only این عملگر باعث اعمال نشدن دستورات مدیا کوئری در مرورگرهای قدیمی می شود
  3. and اگر حاصل دو طرف این عملگر درست باشد مدیا کوئری اعمال می شود

برخی از ویژگی های رسانه که مدیا کوئری از آنها پشتیبانی می کند

  1. color
  2. color-index
  3. device-height
  4. device-width
  5. height
  6. max-height
  7. min-height
  8. width
  9. max-width
  10. min-width
  11. و...

مدیا کوئری ها چه کاربردی در طراحی قالب ریسپانسیو دارند؟

در واقع مدیا کوئری ها هستند که امکان طراحی قالب ریسپانسیو را فراهم کرده اند و بدون مدیا کوئری ها نمی توان یک قالب واکنشگرای حرفه ای طراحی کرد. کافی است نحوه استفاده از max-width و min-width را به خوبی یاد بگیرید تا بتوانید قالب را در دستگاههایی با ابعاد مختلف به خوبی نمایش دهید.

در آینده یک مقاله آموزشی کامل در مورد طراحی قالب ریسپانسیو منتشر خواهیم کرد.



رضا
21:42 - 1395/04/29
4
1
عالی بود . ممنونم
متن نظر *