做移动端项目发现最大的问题是适配问题，总结一下比较好用的适配方法：
首先：丢掉px吧，使用rem,浏览器的默认字体高都是16px因为100%=16px，1px=6.25%，所以10px=62.5%，
rem是只相对于根元素htm的font-size，即只需要设置根元素html的font-size，其它元素或者字体都使用rem为单位设置成相应的百分比即可；
例子：
1 html{font-size:62.5%;}
2 body{font-size:1.2rem ;} (12px)
3 p{font-size:1.4rem;}（14px）
4 div{5rem}(50px)
其次在head标签里添加：
<meta content="width=device-width,initial-scale=0.5,maximum-scale=1,minimum-scale=0.1,user-scalable=0" name="viewport">
（具体值自己根据下面说明拟定）
1、width : 控制viewport的大小，可以指定一个值，如600， 或者特殊的值，如device-width为设备的宽度
2、height : 和width相对应，指定高度
3、initial-scale : 初始缩放比例，页面第一次加载时的缩放比例
4、maximum-scale : 允许用户缩放到的最大比例，范围从0到10.0
5、minimum-scale : 允许用户缩放到的最小比例，范围从0到10.0
6、user-scalable : 用户是否可以手动缩放，值可以是：①yes、 true允许用户缩放；②no、false不允许用户缩放
然后用谷歌手机测试台测试完美适配！