自適應(yīng)需要從以下幾個(gè)方面入手：
布局、字體、retina帶來(lái)的問(wèn)題
一、布局：
1. 用%做單位
老方案，兼容性高
在制作落地頁(yè)的時(shí)候，一般會(huì)有一屏展示的需求，就是不需要滾動(dòng)就展示全部?jī)?nèi)容，我的解決方案是通過(guò)
html,body{height:100%} /*設(shè)置body高度為屏幕高度*/
.section-header{height:30%}
.section-content{height:60%}
.section-footer{height:10%}
2. 用flex方案 （推薦）
這里有兼容第一版本和第三版本flex的庫(kù) https://github.com/lzxb/flex.css
比%精準(zhǔn)，而且靈活
3. 用rem做單位（不推薦）
需要設(shè)置基準(zhǔn)font-size，見下面自適應(yīng)字體的解決方案
二、字體
1. 使用rem，設(shè)置基準(zhǔn)font-size (有的說(shuō)法說(shuō)rem有問(wèn)題)
可以設(shè)置動(dòng)態(tài)基準(zhǔn)font-size = clientWidth / 10，將clientWidth平均劃成10份，模擬vw作為單位，彌補(bǔ)vw的兼容性
2. 根據(jù)dpr動(dòng)態(tài)生成
用js判斷出dpr之后，設(shè)置body的屬性dpr，根據(jù)不同的dpr來(lái)設(shè)置不同的字體大小
3. 根據(jù)設(shè)計(jì)稿的尺寸
可以根據(jù)設(shè)計(jì)稿來(lái)設(shè)置基準(zhǔn)clientWidth / designWidth * designFontSize，然后使用css編譯工具來(lái)編譯。
tips：
方案1和方案2可以用postcss的px2rem一起實(shí)現(xiàn)
三、retina屏幕
當(dāng)dpr為2的時(shí)候，一個(gè)抽象像素要用到122個(gè)物理像素來(lái)顯示；當(dāng)dpr為3的時(shí)候，一個(gè)抽象像素要用到133個(gè)物理像素來(lái)顯示。
retina屏帶來(lái)的問(wèn)題：
① 圖片高清問(wèn)題
當(dāng)一張位圖的1個(gè)抽象像素用4個(gè)物理像素（dpr=2）展示的時(shí)候，每個(gè)物理像素需要取該顏色和亮度的近似值，所以會(huì)產(chǎn)生模糊的問(wèn)題；相反，一張位圖的4個(gè)抽象像素用1個(gè)物理像素展示的時(shí)候，圖像顯示的銳度會(huì)降低（downsampling）。
解決方案：
1. 動(dòng)態(tài)viewport （只解決了blur的問(wèn)題，而downsampling我覺得這個(gè)肯定會(huì)有吧？）
根據(jù)設(shè)備的dpr用圖片服務(wù)器生成1x、2x、3x的圖片
2. 阿里lib.img
https://github.com/amfe/article/issues/8
問(wèn)題延伸：icon的高清問(wèn)題以及解決方案
https://github.com/amfe/article/issues/2
② 1px問(wèn)題
設(shè)置1px的時(shí)候，用了4個(gè)物理像素（dpr=2）展示，會(huì)顯得比較粗
解決方案：
1. 見動(dòng)態(tài)viewport
2. 設(shè)置transform scale
transform:scaleX(0.5);
transform:scaleY(0.5);
總結(jié)：
淘寶方案lib-flexible使用了使用了動(dòng)態(tài)viewport、rem布局、根據(jù)dpr動(dòng)態(tài)生成字體大?。ㄗ孕衟ostcss）
可以參考以下文章：
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
其實(shí)有時(shí)候如果對(duì)1px和高清圖片要求不是很高，只需要考慮設(shè)置scale為1，然后選用flex，動(dòng)態(tài)設(shè)置font-size即可
參考：http://f2e.souche.com/blog/yi-dong-duan-zi-gua-ying-fang-an/
相關(guān)基礎(chǔ)知識(shí)：
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大小恒等于瀏覽器窗口的大小
③移動(dòng)端的viewport分為layoutviewport和visualviewport，viewport的本質(zhì)是html元素的wrapper，它限制了html的寬度。但是viewport不在HTML范疇內(nèi)，所以不可以通過(guò)html的css來(lái)設(shè)置viewport的寬度。layoutviewportde的默認(rèn)值一般在 768px ~ 1024px 之間，最常見的寬度是 980px。而visualviewport是控制meta viewport的scale程度的
④如果設(shè)置的meta viewport width="device-width"，layoutviewport的寬度就會(huì)變?yōu)閷?duì)應(yīng)的物理大?。ㄗ⒁獠皇俏锢硐袼兀@樣就是理想視口，用戶一加載進(jìn)來(lái)的時(shí)候不用縮放來(lái)瀏覽。
⑤設(shè)置了initial-scale=1，就會(huì)觸發(fā)width="device-width"
⑥meta viewport的width的值是dip，就算它的值為“device-width”加載相關(guān)
①onload和onpageshow的區(qū)別：當(dāng)頁(yè)面是從緩存中讀取的，onload就不執(zhí)行，而onpageshow仍然執(zhí)行;
②document.readyState有三種狀態(tài)：loading、interactive、complete
③domcontentloaded、onload的區(qū)別
