移动端适配方法

作移动端项目发现最大的问题是适配问题，总结一下比较好用的适配方法：

首先：丢掉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{width:5rem}(50px)

其次在head标签里添加：

<meta content="width=device-width,initial-scale=0.5,maximum-scale=1,minimum-scale=0.1,user-scalable=0" name="viewport">

 

（具体值本身根据下面说明拟定）

一、width : 控制viewport的大小，能够指定一个值，如600， 或者特殊的值，如device-width为设备的宽度

二、height : 和width相对应，指定高度

三、initial-scale : 初始缩放比例，页面第一次加载时的缩放比例

四、maximum-scale : 容许用户缩放到的最大比例，范围从0到10.0

五、minimum-scale : 容许用户缩放到的最小比例，范围从0到10.0

六、user-scalable : 用户是否能够手动缩放，值能够是：①yes、 true容许用户缩放；②no、false不容许用户缩放

而后用谷歌手机测试台测试完美适配！