適配：顧名思義，在不同尺寸的手機(jī)設(shè)備上，頁(yè)面相對(duì)性的達(dá)到合理的展示（自適應(yīng)）或者“保持統(tǒng)一效果的等比縮放”

適配應(yīng)關(guān)注的要素是那些？

關(guān)注點(diǎn)： 字體，高寬間距，圖像（圖標(biāo)，圖片）
對(duì)應(yīng)圖像，一般比較通用方便的方式是：利用css將圖像限定在元素內(nèi)（img圖片用max-width:100%,背景圖片使用background-size），布局只針對(duì)元素進(jìn)行。

第一種方案：固定高度，寬度自適應(yīng)

這是一種比較通用的方法，屬于自適應(yīng)布局，viewport width設(shè)置為device width，以較小寬度的視覺(jué)稿作為參照來(lái)布局。垂直方向的高度和間距使用定值，水平方向混合使用定值和百分比或者是彈性布局，最終達(dá)到“當(dāng)手機(jī)屏幕發(fā)生變化時(shí)，橫向拉伸或者填補(bǔ)空白的效果”，圖像元素根據(jù)容器情況，使用定值或者是background-size縮放。
要點(diǎn)：

• 以小寬度作為參照是因?yàn)槿绻季譂M足了小寬度的擺放，當(dāng)屏幕變寬時(shí)，簡(jiǎn)單的填充空白就可以了。放過(guò)來(lái)則樣式就可能會(huì)錯(cuò)亂。
• 需要小寬度的布局，又需要大寬度的圖像，這是一個(gè)矛盾點(diǎn)
• 320px過(guò)于窄小，不利于頁(yè)面設(shè)計(jì)，只能設(shè)計(jì)橫向拉伸的元素布局，存在很多局限性。
• 兼容性好。

第二種方案： 固定寬度，viewport縮放

視覺(jué)稿，頁(yè)面寬度，viewport width 使用統(tǒng)一寬度，利用瀏覽器自身縮放完成適配。頁(yè)面樣式（包括圖像元素）完全按照視覺(jué)稿的尺寸，使用定值（px，em）就可以完成。
優(yōu)點(diǎn):

• 開發(fā)簡(jiǎn)單 縮放完全交給瀏覽器，完全按照視覺(jué)稿切圖
• 還原精確 絕對(duì)等比縮放，可以精確還原視覺(jué)稿（不考慮清晰度的情況下）
• 測(cè)試方便 在pc端就可以完成絕大部分的測(cè)試，手機(jī)端只需酌情調(diào)整一些細(xì)節(jié)

存在的問(wèn)題：

• 像素丟失 對(duì)于一些分辨率較低的手機(jī)，可能設(shè)備像素還未達(dá)到指定的viewport寬度，此時(shí)屏幕寬度渲染可能就不準(zhǔn)確了。
• 縮放失效 某些安卓機(jī)不能正確根據(jù)meta標(biāo)簽中的width 的值來(lái)縮放viewport ，需要配合initial-scale

第三個(gè)方案： 利用rem布局

依照某個(gè)特定寬度設(shè)定rem值（即html 的 font-size）頁(yè)面任何需要彈性適配的元素，尺寸均換算為rem來(lái)布局；當(dāng)頁(yè)面渲染的時(shí)候，根據(jù)頁(yè)面有效寬度進(jìn)行計(jì)算，調(diào)整rem的大小，動(dòng)態(tài)縮放以達(dá)到設(shè)配效果。利用該方案，還可以根據(jù)devicepixelRatio設(shè)定inital-scale來(lái)放大viewport，使得頁(yè)面按照物理像素渲染，提高清晰度。

優(yōu)點(diǎn)：

• 清晰度高，能達(dá)到物理像素的清晰度
• 能解決dpr引起的1像素的問(wèn)題。
• 向后兼容好，即便屏幕寬度增加，ppi增加該方案依舊適用。
  缺點(diǎn)：
• 適配js需盡早引入，避免或減少viewport變化引起的重繪。
• 某些安卓機(jī)會(huì)丟掉rem小數(shù)部分
• 需要預(yù)編譯庫(kù)進(jìn)行單位轉(zhuǎn)換