logo-mini
مدیا کوئری

مدیا کوئری – لیست سایز های پرکاربرد

به اشتراک گذاری این پست

مدیا کوئری – لیست سایز های پرکاربرد

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

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

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

 

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

  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 را به خوبی یاد بگیرید تا بتوانید قالب را در دستگاههایی با ابعاد مختلف به خوبی نمایش دهید.

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

 

/* ================================================ */
/* Responsive - Media queries                       */
/* Based on:                                        */
/* http://lab.maltewassermann.com/viewport-resizer/ */
/* ================================================ */
 
 
/* ============================================== */
/* HDTV                                           */
/*                                      ۱۹۲۰x1080 */
/* ============================================== */
@media screen and (min-width: 1080px) and (max-width: 1920px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
 
}
 
/* ============================================== */
/* Widescreen                                     */
/*                                       ۱۲۸۰x800 */
/* ============================================== */
@media screen and (min-width: 800px) and (max-width: 1280px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
 
}
 
/* ============================================== */
/* Twitter Bootstrap                              */
/*                                       ۹۸۰x     */
/* ============================================== */
@media screen and (min-width: 980px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
 
}
 
/* ============================================== */
/* Twitter Bootstrap                              */
/*                                       x979     */
/* ============================================== */
@media screen and (max-width: 979px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
 
}
 
/* ============================================== */
/* iPad Landscape & Portrait                      */
/*                                       ۱۰۲۴x768 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
 
}
 
/* ============================================== */
/* iPad Landscape                                 */
/*                                       ۱۰۲۴x768 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
 
}
 
/* ============================================== */
/* iPad Portrait                                  */
/*                                       ۷۶۸x1024 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
 
}
 
/* ============================================== */
/* Small Tablet Landscape/Portrait                */
/*                                        ۸۰۰x600 */
/* ============================================== */
@media screen and (min-width: 600px) and (max-width: 800px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
 
 
/* ============================================== */
/* iPhone5/Android landscape (& narrow browser)   */
/*                                        ۵۶۸x320 */
/* ============================================== */
@media screen and (min-width: 320px) and (max-width:568px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
 
/* ============================================== */
/* iPhone4/Android landscape (& narrow browser)   */
/*                                        ۴۸۰x320 */
/* ============================================== */
@media screen and (min-width: 320px) and (max-width:480px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
 
/* ============================================== */
/* iPhone4/Android portrait               ۳۲۰x480 */
/* iPhone5 portrait                       ۳۲۰x568 */
/* ============================================== */
@media screen and (max-width:320px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
 
/* ============================================== */
/* Smaller devices                                */
/* Android Landscape                      ۳۲۰x240 */
/* ============================================== */
@media screen and (min-width:240px) and (max-width:320px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
 
/* ============================================== */
/* Smaller devices                                */
/* Android Portrait                       ۲۴۰x320 */
/* ============================================== */
@media screen and (max-width:240px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}

 

M6R7M

محمدرضا محمودی هستم ، سعی شده در این وبلاگ مطالب مفید و کارامدی قرار بگیره ، از اینکه وقت میگذارید و مطالب رو مطالعه میکنید متشکرم... ممنون میشم اگر موردی و یا ... میبینید حتما نظرات خودتون رو ارسال کنید


نظر بدهید