响应式网站布局要适应的当下主流手机屏幕的各个版本的分辨率有哪些(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

 

posted @ 2018-06-21 14:19  Booo  阅读(2014)  评论(0编辑  收藏  举报