響應式網站布局要適應的當下主流手機屏幕的各個版本的分辨率有哪些（media query）

CSS寬有14種：

320、360、375、384、400、414、533、600、768、800、853、1024、1280、1366

CSS高有16種：

360、480、533、568、569、600、640、667、720、736、768、800、853、960、1024、1280

考慮到屏幕可能變為豎屏，那么綜合一下共20種:

320、360、375、384、400、414、480、533、568、600、640、667、720、736、768、800、853、853、960、1024、1280、1366

划分一下，大致是：

第一檔在小屏幕手機：320~411
第二檔在note/pad：400~900 
第三檔在桌面端：960~ 
在實際項目中統計的結果表明，手機屏幕的寬度中的95%還在320~411寬。保證手機版畫面主體內容在320寬內即可。

 

 

 

 

/@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */}

@media only screen and (max-device-width :480px){ }

@media only screen and (min-device-width :481px){ }

 

/*6*/

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ }

 

/*6+*/

@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ }

 

/*魅族*/

@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ }

 

 

/*mate7*/

@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ }

 

 

/*4 4s*/

@media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ }

@media screen and (min-width: 320px) and (max-width: 480px) { }

 

 

/* 平板之類的寬度 1024 以下設備 */

@media only screen and (min-width: 321px) and (max-width: 1024px) { body { background: blue; } }

 

/* PC客戶端或大屏幕設備: 1028px 至更大 */

@media only screen and (min-width: 1029px) { body { background: green; } }

 

 

/* 豎屏 */

@media screen and (orientation:portrait) and (max-width: 720px) {對應樣式}

 

 

/* 橫屏 */

@media screen and (orientation:landscape){對應樣式}

 

 

 

 

 

 

 

 

分界點(dp)	手機/平板電腦豎屏	手機/平板電腦橫屏	屏幕	列數	間隔寬度(dp)
0	small handset		超小	4	16
360	medium handset		超小	4	16
400	large handset		超小	4	16
480	large handset	small handset	超小	4	16
600	small tablet	medium handset	小	8	16/24*
720	large tablet	large handset	小	8	16/24*
840	large tablet	large handset	小	12	16/24*
960		small tablet	小	12	24
1024**		large tablet	中等	12	24
1280**		large tablet	中等	12	24
1440**			大	12	24
1600**			大	12	24
1920**			超大	12	24