自適應(yīng)需要從以下幾個方面入手：
布局轩勘、字體伞芹、retina帶來的問題
一栈雳、布局：
1. 用%做單位
老方案护奈，兼容性高
在制作落地頁的時候，一般會有一屏展示的需求哥纫，就是不需要滾動就展示全部內(nèi)容霉旗，我的解決方案是通過
html,body{height:100%} /*設(shè)置body高度為屏幕高度*/
.section-header{height:30%}
.section-content{height:60%}
.section-footer{height:10%}
2. 用flex方案 （推薦）
這里有兼容第一版本和第三版本flex的庫 https://github.com/lzxb/flex.css
比%精準(zhǔn)，而且靈活
3. 用rem做單位（不推薦）
需要設(shè)置基準(zhǔn)font-size蛀骇，見下面自適應(yīng)字體的解決方案
二厌秒、字體
1. 使用rem，設(shè)置基準(zhǔn)font-size (有的說法說rem有問題)
可以設(shè)置動態(tài)基準(zhǔn)font-size = clientWidth / 10擅憔，將clientWidth平均劃成10份鸵闪，模擬vw作為單位，彌補(bǔ)vw的兼容性
2. 根據(jù)dpr動態(tài)生成
用js判斷出dpr之后暑诸，設(shè)置body的屬性dpr岛马，根據(jù)不同的dpr來設(shè)置不同的字體大小
3. 根據(jù)設(shè)計稿的尺寸
可以根據(jù)設(shè)計稿來設(shè)置基準(zhǔn)clientWidth / designWidth * designFontSize棉姐，然后使用css編譯工具來編譯。
tips：
方案1和方案2可以用postcss的px2rem一起實現(xiàn)
三啦逆、retina屏幕
當(dāng)dpr為2的時候伞矩，一個抽象像素要用到122個物理像素來顯示；當(dāng)dpr為3的時候夏志，一個抽象像素要用到133個物理像素來顯示乃坤。
retina屏帶來的問題：
① 圖片高清問題
當(dāng)一張位圖的1個抽象像素用4個物理像素（dpr=2）展示的時候，每個物理像素需要取該顏色和亮度的近似值沟蔑，所以會產(chǎn)生模糊的問題湿诊；相反，一張位圖的4個抽象像素用1個物理像素展示的時候瘦材，圖像顯示的銳度會降低（downsampling）厅须。
解決方案：
1. 動態(tài)viewport （只解決了blur的問題，而downsampling我覺得這個肯定會有吧食棕？）
根據(jù)設(shè)備的dpr用圖片服務(wù)器生成1x朗和、2x、3x的圖片
2. 阿里lib.img
https://github.com/amfe/article/issues/8
問題延伸：icon的高清問題以及解決方案
https://github.com/amfe/article/issues/2
② 1px問題
設(shè)置1px的時候簿晓，用了4個物理像素（dpr=2）展示眶拉，會顯得比較粗
解決方案：
1. 見動態(tài)viewport
2. 設(shè)置transform scale
transform:scaleX(0.5);
transform:scaleY(0.5);
總結(jié)：
淘寶方案lib-flexible使用了使用了動態(tài)viewport、rem布局憔儿、根據(jù)dpr動態(tài)生成字體大幸渲病（自行postcss）
可以參考以下文章：
https://github.com/amfe/lib-flexible
http://div.io/topic/1092
https://github.com/amfe/article/issues/17
http://huodong.m.taobao.com/act/yibo.html
其實有時候如果對1px和高清圖片要求不是很高，只需要考慮設(shè)置scale為1谒臼，然后選用flex朝刊，動態(tài)設(shè)置font-size即可
參考：http://f2e.souche.com/blog/yi-dong-duan-zi-gua-ying-fang-an/
相關(guān)基礎(chǔ)知識：
retina相關(guān)
http://www.w3cplus.com/css/viewports.html
https://github.com/riskers/blog/issues/17
①設(shè)備像素比(device pixel ratio ) = 物理像素(physical pixel) / 設(shè)備獨(dú)立像素(density-independent pixel)
②pc的viewport大小恒等于瀏覽器窗口的大小
③移動端的viewport分為layoutviewport和visualviewport，viewport的本質(zhì)是html元素的wrapper蜈缤，它限制了html的寬度拾氓。但是viewport不在HTML范疇內(nèi)，所以不可以通過html的css來設(shè)置viewport的寬度劫樟。layoutviewportde的默認(rèn)值一般在 768px ~ 1024px 之間痪枫，最常見的寬度是 980px。而visualviewport是控制meta viewport的scale程度的
④如果設(shè)置的meta viewport width="device-width"叠艳，layoutviewport的寬度就會變?yōu)閷?yīng)的物理大心坛隆（注意不是物理像素），這樣就是理想視口附较，用戶一加載進(jìn)來的時候不用縮放來瀏覽吃粒。
⑤設(shè)置了initial-scale=1，就會觸發(fā)width="device-width"
⑥meta viewport的width的值是dip拒课，就算它的值為“device-width”加載相關(guān)
①onload和onpageshow的區(qū)別：當(dāng)頁面是從緩存中讀取的徐勃，onload就不執(zhí)行事示，而onpageshow仍然執(zhí)行;
②document.readyState有三種狀態(tài)：loading、interactive僻肖、complete
③domcontentloaded肖爵、onload的區(qū)別
