需要移動(dòng)端適配的根本原因：屏幕窗口的大小狂鞋，devicepixelratio值等。
簡單介紹下devicepixelratio(設(shè)備像素比,即dpr) = physicalpixel (物理像素) / density-independent pixel(設(shè)備獨(dú)立像素,即dip)验靡。
在JavaScript中，可以通過window.devicePixelRatio獲取到當(dāng)前設(shè)備的dpr。而在CSS中妄讯，可以通過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進(jìn)行媒體查詢酷宵，對不同dpr的設(shè)備亥贸，做一些樣式適配(這里只針對webkit內(nèi)核的瀏覽器和webview)。
dip或dp,（device independent pixels浇垦，設(shè)備獨(dú)立像素）與屏幕密度有關(guān)炕置。dip可以用來輔助區(qū)分視網(wǎng)膜設(shè)備還是非視網(wǎng)膜設(shè)備。
移動(dòng)端適配主要有兩大不同的方向：響應(yīng)式布局和自適應(yīng)布局男韧。
響應(yīng)式布局是根據(jù)屏幕大小自動(dòng)的調(diào)整布局位置（非單純的縮放）朴摊，實(shí)現(xiàn)適配
自適應(yīng)布局則是根據(jù)屏幕大小自動(dòng)的縮放大小，實(shí)現(xiàn)適配煌抒。個(gè)人喜歡自適應(yīng)布局的這種方式仍劈。
1.純css實(shí)現(xiàn)方式 -- 媒體查詢
使用原生css來實(shí)現(xiàn)媒體查詢是很繁瑣的，因?yàn)槊總€(gè)媒體查詢都要重寫以便寡壮。推薦使用css的預(yù)編譯器(sass,less,stylus)來實(shí)現(xiàn)贩疙，至于為什么要用預(yù)編譯器，應(yīng)該不用我說吧况既。
//less版本
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;
}
}
@media only screen and (min-width: 751px) {
html {
font-size: 50px !important;
}
}
@media only screen and (min-width: 1080px) {
html {
font-size: 60px !important;
}
}
@unit: 50rem; //基準(zhǔn)單位,根據(jù)設(shè)計(jì)稿來確定这溅。假設(shè)：設(shè)計(jì)稿尺寸為750，那么@unit設(shè)置為50rem(1rem=50px更方便下面計(jì)算)
.warp{with: 100 / @unit} // 設(shè)計(jì)稿上元素的尺寸為100px => .warp{with: 2rem}
.warp{with: 10 / @unit} // 設(shè)計(jì)稿上元素的尺寸為10px => .warp{with: 0.2rem}
這樣當(dāng)頁面展示在750的屏幕上時(shí)棒仍，html的font-size為50px悲靴，那么當(dāng)設(shè)置為2rem的元素顯示的尺寸就為2*50px=100px。在其他尺寸的設(shè)備也會(huì)根據(jù)媒體查詢設(shè)置的不同font-size進(jìn)行自動(dòng)縮放適配莫其。
當(dāng)然上面也提到了癞尚，在css中也是可以獲取到devicePixelRatio的值耸三，那么為了更精確在寫媒體查詢的時(shí)候可以把它也加上去，這里就不展開了浇揩。
2.js的實(shí)現(xiàn)方式
js的實(shí)現(xiàn)方式仪壮，參考了網(wǎng)易和淘寶的實(shí)現(xiàn)方式，對他們進(jìn)行了整合胳徽。并且修復(fù)了手機(jī)端1px問題积锅。
-
網(wǎng)易實(shí)現(xiàn)方式是通過設(shè)備尺寸動(dòng)態(tài)的設(shè)置DOM的根元素字體大小，沒有考慮devicePixelRatio的因素; -
淘寶實(shí)現(xiàn)方式也是通過設(shè)備尺寸動(dòng)態(tài)的設(shè)置DOM的根元素字體大小养盗，并且考慮了devicePixelRatio的因素缚陷，但淘寶在設(shè)置rem時(shí)，顯得較復(fù)雜(不方便寫css把px轉(zhuǎn)化成rem); -
1px問題簡單點(diǎn)說就是因?yàn)?code>devicePixelRatio的存在往核，css的1px不等于移動(dòng)端的1px箫爷。
(function(doc, win, designSize) { //designSize為設(shè)計(jì)稿的尺寸(寬)
var docEl = document.documentElement,
devWidth = docEl.clientWidth > 1080 ? 1080 : docEl.clientWidth,
dpr = devicePixelRatio || 1,
scale = 1 / dpr,
width = dpr * devWidth,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'onresize', //判斷橫屏和窗口重置
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
document.querySelector('meta[name="viewport"]')
.setAttribute('content','width=' + width +
', initial-scale=' + scale +
', maximum-scale=' + scale +
', minimum-scale=' + scale +
', user-scalable=no');
docEl.style.fontSize = devWidth / (designSize / 100) * dpr + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window, 750);
