移動端適配方法

標籤：設定   總結   html   user   使用   相對   比例   font   false   

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

首先：丟掉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">

 

（具體值自己根據下面說明擬定）

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不允許使用者縮放

然後用Google手機測試台測試完美適配！

移動端適配方法