移動適配方案的總結

1. js代碼實現適配 

var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
//iphone6下font-size=20px
dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 37.5;  
scale = 1 / dpr;


// 設置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;

　　2.媒體查詢實現適配

html {
font-size : 20px;
 }
 @media only screen and (min-width: 401px){
 html {
 font-size: 25px !important;
 }
 }
 @media only screen and (min-width: 428px){
 html {
 font-size: 26.75px !important;
 }
 }
 @media only screen and (min-width: 481px){
 html {
 font-size: 30px !important; 
 }
 }
 @media only screen and (min-width: 569px){
 html {
 font-size: 35px !important; 
 }
 }
 @media only screen and (min-width: 641px){
 html {
 font-size: 40px !important; 
 }
 }