响应式设计媒体查询尺寸分界点一览表

CSS3中的媒体查询(media query)是响应式设计的关键技术。

媒体查询技术本质就是检测设备不同的尺寸来应用不同的样式,所以我们需要对尺寸检测有一个统一的参考标准。

从最佳用户体验来看,材料化设计用户界面应该适应如下布局尺寸:480、600、840、960、1280、1440和1600dp(设备独立像素):

分界点(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

注:上述表格中,*号表示当设备最小宽度小于600时取值16dp。**表示在桌面系统中分界点要比所列值小16dp以适应Chrome浏览器的变化。


by iefreer

你可能感兴趣的:(响应式设计媒体查询尺寸分界点一览表)