如今所有移动设备的尺寸各异，对于移动web的响应式也是一个考验
以下是目前一些主流设备的尺寸大小：
上图所有设备中可以总结为：
| 设备 | 分辨率 | web尺寸 | 倍率 | meta label |
| iPhone4-4s | 640×960px | 320×480px | 0.5 |
<meta content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=no;" name="viewport"> |
| iPhone5-5s-5c | 640×1136px | 320×568px | 0.5 |
<meta content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=no;" name="viewport"> |
| iPhone6 | 750×1334px | 375×667px | 0.5 |
<meta content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=no;" name="viewport"> |
| iPhone6 plus | 1242×2208px | 414×736 | 0.3333333333333333 |
<meta content="width=device-width, initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, user-scalable=no;" name="viewport"> |
| ipad mini | 1024×768px | 1024×768px | 1 |
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no;" name="viewport"> |
| 安卓设备 | - | - | 1 |
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no;" name="viewport"> |
移动端字体大小html{font-size:62.5%;}
在其他元素中使用字体大小的时候，使用单位为rem ，转换为像素是的倍率是10，也就是说 设计图中的字体大小为25px，css中font-size为2.5rem。