摘要：如何解決移動端的自適應(yīng)問題主要是移動端的屏幕尺寸比較多，如何在各種屏幕寬度下顯示的更好，更一致問題。用解決自適應(yīng)的問題，是個非常精確的解決方案，能夠?qū)⒏叨群蛯挾榷甲龅诫S著屏幕的寬度完全的等比縮放，但是缺點就是開發(fā)起來效率低點。

首先是看幾篇文章，了解viewport scale dpr 圖片的顯示精度問題 一像素顯示問題， 縮放導(dǎo)致的像素適應(yīng)問題 移動端的自適應(yīng)問題
http://www.cnblogs.com/520yan...

http://www.cnblogs.com/520yan...

https://mp.weixin.qq.com/s?__...

https://github.com/amfe/artic...

其實圖片顯示高清的問題，最理想的方案是根據(jù)dpr去加載不同精度的圖片，但是一般這個工作效果不是很明顯，直接顯示精度大的圖片就可以了，雖然在dpr是1的屏幕上會費流量、有點色差 但是完全可以忽略。
所以圖片這個問題還好。

1px顯示的問題，利用縮放解決
一般設(shè)計給的設(shè)計稿都是針對iphone6的750px 1334px ,但是iphone6的設(shè)備獨立像素是375px667px iphone6的dpr=2

所以如果我們把viewport設(shè)成375px的話，就無法顯示設(shè)計稿中1px的元素。
所以為了顯示1px，我們需要將viewport設(shè)成750px，然后設(shè)置scale=0.5，這樣手機屏幕還是完整的顯示頁面，并且使得css中的px
和手機物理設(shè)備的px相同了。

但是scale的縮放會影響原來的像素大小，比如在scale=1時，一個元素應(yīng)該是12px 但是scale=0.5時，整體頁面縮小了1倍，這個元素的大小應(yīng)該是24px，才能和原來顯示一樣。

在dpr=2的時候設(shè)html的font-size=100px，在dpr=1的時候設(shè)置font-size=50。然后需要在不同dpr下顯示不同px的地方就可以以rem為單位進(jìn)行設(shè)置。
那么為什么把dpr=2的時候設(shè)置font-size=100， 因為設(shè)計稿給的是iphone6 dpr=2的情況下的像素，所以根據(jù)設(shè)計稿換算起來比較簡單，比如設(shè)計稿中font-size: 24px。我們可以直接寫font-size:0.24rem。 這樣在dpr=2的時候顯示成24px 在dpr=1的時候顯示成12px。

主要是移動端的屏幕尺寸比較多，如何在各種屏幕寬度下顯示的更好，更一致問題。
比較簡單的辦法就是百分比或者flex。

以后深入研究下百分比和flex的使用。
比如750px，我們可以把所有元素flex的總和設(shè)成750px，比如左邊f(xié)lex 300 右邊 flex450 就是 300比450的自適應(yīng)。
百分比要注意的是他所設(shè)置的百分比 是父元素的寬度為基礎(chǔ)的。

然后還要考慮的是高度的問題，高度怎么去適應(yīng)。圖片的話高度會隨著寬度等比例縮放。

用rem解決自適應(yīng)的問題，是個非常精確的解決方案，能夠?qū)⒏叨群蛯挾榷甲龅诫S著屏幕的寬度完全的等比縮放，但是缺點就是開發(fā)起來效率低點。來看看如何操作。

首先還是會根據(jù)dpr 來設(shè)置viewport的寬度和scale的縮放級別
然后設(shè)計成頁面的寬度是10rem，
1rem = 頁面寬度/10 = device-width * dpr /10;
以iphone6為例
1rem = 375 * 2 /10 = 75px；
所以設(shè)
html {
font-size = 75px;
}
然后把html加一個屬性data-dpr = 2;

示例代碼如下：

javascript方式，通過上面的公式，計算出基準(zhǔn)值rem，然后寫入樣式，大概如下(代碼參考自kimi的m-base模塊)
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement("style");
var metaEl = document.querySelector("meta[name="viewport"]");

dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
scale = 1 / dpr;

// 設(shè)置viewport，進(jìn)行縮放，達(dá)到高清效果
metaEl.setAttribute("content", "width=" + dpr * docEl.clientWidth + ",initial-scale=" + scale + ",maximum-scale=" + scale + ", minimum-scale=" + scale + ",user-scalable=no");

// 設(shè)置data-dpr屬性，留作的css hack之用
docEl.setAttribute("data-dpr", dpr);

// 動態(tài)寫入樣式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = "html{font-size:" + rem + "px!important;}";

// 給js調(diào)用的，某一dpr下rem和px之間的轉(zhuǎn)換函數(shù)
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;

這樣的實現(xiàn)，就能夠完全的將設(shè)計稿中的px對應(yīng)成rem，并且能夠根據(jù)屏幕的寬度進(jìn)行自適應(yīng)。
有兩個問題:
第一個問題是設(shè)計稿到rem的轉(zhuǎn)換降低開發(fā)效率
比如設(shè)計稿750px，1rem = 75px。 設(shè)計稿上的50px，我們需要計算出50/75 rem
第二個問題是 rem設(shè)置成device-width的10分之一，縮放引起的字體的大小變化就不能用rem來解決了
因為我們一般只是想在不同縮放下，一起縮放字體，而字體不需要自適應(yīng)。
字體應(yīng)該是在任何屏幕上字體都應(yīng)該保持一致。

先說第二個問題：
這個就可以利用CSS實現(xiàn)
思路 因為已經(jīng)在html上設(shè)置data=dpr

font-size: 16px;
[data-dpr="2"] input {
  font-size: 32px;
}

可以用sass寫成一個mixin

@mixin dpr($property, $value) {
    & {
        #{$property}: $value / 2; /* no */
    }

    [data-dpr="2"] & {
        #{$property}: $value; /* no */
    }

    [data-dpr="3"] & {
        #{$property}: $value * 1.5; /* no */
    }
}

@mixin font-size($fontSize) {
    @include dpr(font-size, $fontSize);
}

這樣用的地方可以這樣寫
@include font-size(52px);

再說第一個問題px到rem的轉(zhuǎn)換問題
淘寶的rem庫，lib-flexible
https://github.com/amfe/artic...
這篇文章里說了幾種方法
有sublime的插件，有sass的處理函數(shù)，有g(shù)ulp的插件，
我們現(xiàn)在都用webpack做開發(fā)，和打包，所以用一個webpack的插件px2rem-loader
這個插件可以實現(xiàn)我們直接寫px 打包的時候自動轉(zhuǎn)換成rem
CSS的loader中加入px2rem插件

const REM_UNIT = 75;
 let px2rem = `px2rem?remUnit=${REM_UNIT}&remPrecision=8&threeVersion=true`;
  return {
    css: generateLoaders([ "css" , px2rem]),
    postcss: generateLoaders([ "css" , px2rem]),
    less: generateLoaders([ "css", px2rem , "less" ]),
    sass: generateLoaders([ "css", px2rem , "sass?indentedSyntax" ]),
    scss: generateLoaders([ "css", px2rem , "sass" ]),
    stylus: generateLoaders([ "css", px2rem , "stylus" ]),
    styl: generateLoaders([ "css", px2rem, "stylus" ])
  }