debug过程
1.在web上浏览的时候，响应式布局是好用的，放大缩小页面都可以实现页面变更，但是在手机上调试的时候死活不能用
2.因为css中@media是根据window的宽度来控制css的，所以我尝试输出了一下在window变更的时候window的width，结果发现PC上使用时一切正常，而手机上输出的一直是980。
原因很简单，手机上的浏览器是全屏的，我手机实际宽度是320像素，而我手机分辨率是980宽度，所以手机上打出来的是980而不是320
3.增加
<meta name="viewport" content="width=device-width, initial-scale=1.0">
以后发现手机window的width变为320了，即预期效果
viewpoint说明
- width 控制viewpoint的宽度，可以是固定值，也可以是device-width，即设备的宽度
- height 高度
- initial-scale 控制初始化缩放比例，1.0表示不可以缩放
- maximum-scale 最大缩放比例
- minimum-scale 最小缩放比例
可见如果不定义viewpoint的话，页面宽度以屏幕分辨率为基准，而设置以后可以根据设备宽度来调整页面，达到适配终端大小的效果
参考
Using the viewport meta tag to control layout on mobile browsers