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

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浏览器的变化。