對移動端適配自己的理解

標籤：size   max   creat   rem   css hack   高清   檔案   移動端   cti   

在寫移動端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;
}

 

對移動端適配自己的理解