azami.cu@gmail.com | +98912 373 8239

مدیا کوئری های عمومی در طراحی واکنش گرا

معرفی استایل برای صفحات و دستگاه ها با اندازه های مختلف و استاندارد
html,css,training,web,education,jquery,java script,web,site,وب,سایت,طراحی,responsive,media query
به همت مهندس اعظمی در 1392/05/20

شما برای طراحی واکنش گرا یکی از روش هایی که می تونید استفاده کنید سود بردن از مدیا کوئری های مختلف هستش که با توجه به عرض مدیایی که صفحه شما در اون لود خواهد شد به مرورگر می فهمونید الان از کدوم نوع استایل باید استفاده کنه.

البته روش های دیگه ای برای این کار هستش که آینده به آموزش اونا می پردازیم.

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen  
and (min-device-width : 320px) and (max-device-width : 480px) { 
  /* Styles */ 
} 
   
/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px) { 
  /* Styles */ 
} 
   
/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
  /* Styles */ 
} 
   
/* iPads (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
  /* Styles */ 
} 
   
/* iPads (landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
  /* Styles */ 
} 
   
/* iPads (portrait) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
  /* Styles */ 
} 
   
/* Desktops and laptops ----------- */ 
@media only screen and (min-width : 1224px) { 
  /* Styles */ 
} 
   
/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { 
  /* Styles */ 
} 
   
/* iPhone 4 ----------- */ 
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) { 
  /* Styles */ 
}  
                            


Tags:   html,css,training,web,education,jquery,java script,web,site,وب,سایت,طراحی,responsive,media query