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

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