智能手机屏幕尺寸和分辨率

2.8英寸分辨率为640x480(VGA) 像素密度286PPI
3.2英寸分辨率为480x320(HVGA) 像素密度167PPI
3.3英寸分辨率为854x480(WVGA)像素密度297PPI
3.5英寸分辨率为480x320(HVGA)像素密度165PPI
3.5英寸分辨率为800x480(WVGA)像素密度267PPI
3.5英寸分辨率为854x480(WVGA)像素密度280PPI
3.5英寸分辨率为960x640(DVGA)像素密度326PPI（苹果iphone4）
3.7英寸分辨率为800x480(WVGA)像素密度252PPI
3.7英寸分辨率为800x480(WVGA)像素密度252PPI
3.7英寸分辨率为960x540(qHD)像素密度298PPI
4.0英寸分辨率为800x480(WVGA)像素密度233PPI
4.0英寸分辨率为854x480(WVGA)像素密度245PPI
4.0英寸分辨率为960x540(qHD)像素密度275PPI
4.0英寸分辨率为1136x640(HD)像素密度330PPI（苹果iphone）
4.2英寸分辨率为960x540(qHD)像素密度262PPI
4.3英寸分辨率为800x480(WVGA)像素密度217PPI
4.3英寸分辨率为960x640(qHD)像素密度268PPI
4.3英寸分辨率为960x540(qHD)像素密度256PPI
4.3英寸分辨率为1280x720(HD)像素密度342PPI
4.5英寸分辨率为960*540(qHD)像素密度245PPI
4.5英寸分辨率为1280x720(HD)像素密度326PPI
4.5英寸分辨率为1920x1080(FHD)像素密度490PPI4.7英寸分辨率为1280x720(HD)像素密度312PPI
4.7英寸分辨率为1280x720(HD)像素密度312PPI
4.7英寸分辨率为1280x720(HD)像素密度312PPI
4.8英寸分辨率为1280x720(HD)像素密度306PPI
5.0英寸分辨率为480x800(WVGA)像素密度186PPI
5.0英寸分辨率为1024x768(XGA)像素密度256PPI
5.0英寸分辨率为1280*720像素密度294PPI
5.0英寸分辨率为1920x1080(FHD)像素密度441PPI
5.3英寸分辨率为1280x800(WXGA)像素密度285PPI
5.3英寸分辨率为960x540(qHD)像素密度207PPI
6.0英寸分辨率为854×480像素密度163PPI
6.0英寸分辨率为1280 X 720像素密度245PPI
6.0英寸分辨率为2560×1600像素密度498ppi
7.0英寸分辨率为800x480(WVGA)像素密度128PPI
7.0英寸分辨率为1024*600像素密度169PPI
7.0英寸分辨率为1280*800像素密度216PPI
9.7英寸分辨率为1024x768(XGA)，像素密度132ppi
9.7英寸分辨率为2048x1536，像素密度264PPI
10英寸分辨率为1200X600，像素密度170ppi
10英寸分辨率为2560x1600像素密度299ppi

android开发主流的品牌机的分辨率有：240*320,320*480,480*800,480*854,540*960,640*960,720*1024
0.6475728155339806

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */
.class{}
}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
.class{}
}


@media only screen and (max-width: 1200px) { div{ font-size: 39px; }}
@media only screen and (max-width: 1100px) { div{ font-size: 38px; }}
@media only screen and (max-width: 1000px) { div{ font-size: 37px; }}
@media only screen and (max-width: 900px) { div{ font-size: 36px; }}
@media only screen and (max-width: 800px) { div{ font-size: 35px; }}
@media only screen and (max-width: 700px) { div{ font-size: 34px; }}
@media only screen and (max-width: 600px) { div{ font-size: 33px; }}
@media only screen and (max-width: 500px) { div{ font-size: 32px; }}
@media only screen and (max-width: 400px) { div{ font-size: 31px; }}
@media only screen and (max-width: 300px) { div{ font-size: 30px; }}

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。 对于viewport属性，我是真正在接触移动web开发是才遇到的，一把的ps布局都是固定的960px，1000px这种。

@media only screen and (min-width: 320px) {  
 
  /* Small screen, non-retina */
 
}  
 
@media  
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),  
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),  
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),  
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),  
only screen and (                min-resolution: 192dpi) and (min-width: 320px),  
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) {   
 
  /* Small screen, retina, stuff to override above media query */
 
}  
 
@media only screen and (min-width: 700px) {  
 
  /* Medium screen, non-retina */
 
}  
 
@media  
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),  
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),  
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),  
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),  
only screen and (                min-resolution: 192dpi) and (min-width: 700px),  
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) {   
 
  /* Medium screen, retina, stuff to override above media query */
 
}  
 
@media only screen and (min-width: 1300px) {  
 
  /* Large screen, non-retina */
 
}  
 
@media  
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),  
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),  
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),  
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),  
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),  
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) {   
 
  /* Large screen, retina, stuff to override above media query */
 
}