移動端適配方案小例子

在寫移動端H5頁面的時候，最讓人頭疼的就是適配問題：

接下來是我給個人最佳的解決方案和一個小例子

第一步：適配js(rem.js)

/**
*這裏咱們提取了一個公式(rem表示基準值)
*rem基準值 = document.documentElement.clientWidth * dpr / 10
*若是有一個區塊，在psd文件中量出：寬高750×300px的div，那麼如何轉換成rem單位呢？
*rem = px / rem基準值 ;
**/
;(function(){
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');

var dpr = window.devicePixelRatio || 1;
var scale = 1 / dpr;
var rem = docEl.clientWidth * dpr / 10;//(這裏邊除以10是把屏幕分紅10等分。好比設計稿750px,那麼 1rem = 75px)
// 設置viewport，進行縮放，達到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth
+ ',initial-scale=' + scale + ',maximum-scale=' + scale
+ ',minimum-scale=' + scale + ',user-scalable=no');
// 設置data-dpr屬性，留做的css hack之用
docEl.setAttribute('data-dpr', dpr);
// 動態寫入樣式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
// 給js調用的，某一dpr下rem和px之間的轉換函數
window.rem2px = function(v) {
v = parseFloat(v);
return v * rem;
};
window.px2rem = function(v) {
v = parseFloat(v);
return v / rem;
};
window.dpr = dpr;
window.rem = rem;
})();

引入這個rem.js文件以後，頁面上的meta[name="viewport"]這個標籤就會根據手機屏幕大小和dpr來計算設備的寬度。此時呈現的web app是最完美的。

第二步：css中px到rem的轉換

這裏邊有一點須要注意，接下來就是來寫html+css實現頁面佈局了，在寫css樣式時，咱們須要把常常用到的px換算成rem。

你們可能會不清楚怎麼來換算。下面我舉一個例子：

咱們上面寫的rem.js適配文件是以750*1334的視覺設計稿爲準的，接下來的全部計算都是以750爲準。

在rem.js中，咱們已經動態的改變了html的font-size=基準值；

下面是less文件

//px向rem轉換函數，設計稿是已750px爲準的，計算的基準值是把整個屏幕寬度分紅了10等份。便於計算
.px2rem(@name, @px){
@{name}:(@px / 75) * 1rem;
}
*{
margin:0;
padding:0;
}
.title{
.px2rem(font-size, 32);
.px2rem(padding, 32);
.px2rem(margin,50);
}
.box{
.px2rem(width,750);
.px2rem(height,100);
background-color: #0095CD;
}

下面是編譯以後的css文件

* { margin: 0; padding: 0;}.title { font-size: 0.42666667rem; padding: 0.42666667rem; margin: 0.66666667rem;}.box { width: 10rem; height: 1.33333333rem; background-color: #0095CD;}