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 |