移動端適配方法

作移動端項目發現最大的問題是適配問題，總結一下比較好用的適配方法：

首先：丟掉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不容許用戶縮放

而後用谷歌手機測試臺測試完美適配！