起始的項(xiàng)目并且沒(méi)有做多設(shè)備適配扒披，因?yàn)槭桥涮子布_(kāi)發(fā)鸵鸥，后面為了集成支付寶刷臉付，需要在特定的硬件上運(yùn)行躏升，所以臨時(shí)做了rem適配酝静。今天也重新翻閱了下移動(dòng)端適配資料节榜，就此記錄下。
rem是一個(gè)相對(duì)單位别智，其參考值是根元素的font-size宗苍，默認(rèn)1rem=16px，所以只需要?jiǎng)討B(tài)改變根元素的font-size薄榛，即可簡(jiǎn)單的適配大部分的移動(dòng)端讳窟。
首先需要在index.html中加入如下meta視口標(biāo)簽：
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1
,maximum-scale=1,minimum-scale=1, user-scalable=no"/>
主要是將布局視口與理想視口的尺寸統(tǒng)一，也就是將web的布局范圍限制在手機(jī)屏幕的可視范圍敞恋，不至于需要左右滑動(dòng)才能看全布局丽啡。initial-scale=1,maximum-scale=1,minimum-scale=1, user-scalable=no則是控制網(wǎng)頁(yè)縮放，分別表示：初始縮放比例耳舅、最大縮放比例碌上、最小縮放比例、是否允許縮放浦徊。（這些屬性在IOS中無(wú)效馏予。。盔性。）
然后是
- 根據(jù)設(shè)計(jì)稿霞丧，定義一個(gè)基準(zhǔn)值，一般來(lái)說(shuō)都是iphone6的設(shè)計(jì)稿冕香，即應(yīng)該是
750px像素蛹尝，當(dāng)然也不排除像我這種奇葩的1080px; - 通過(guò)
window.screen.width獲取設(shè)備的理想視口大小; - 用理想視口大小/基準(zhǔn)值*100，即為
font-size的px尺寸悉尾；
舉個(gè)例子突那，目前項(xiàng)目的設(shè)計(jì)稿是在1080像素下繪制的（為什么是1080？因?yàn)殚_(kāi)始根本沒(méi)考慮適配的問(wèn)題）构眯，所以以1080為例：
// 根據(jù)不同設(shè)備的理想視口寬度動(dòng)態(tài)設(shè)置根元素的`font-size`愕难。
let idealViewWidth = window.screen.width;
const BASICVALUE = 1080;
document.documentElement.style.fontSize = (idealViewWidth / BASICVALUE) * 100 + 'px';
在1080px下，根元素的font-size則為100px，所以1rem=100px猫缭，原設(shè)計(jì)稿的px尺寸只需要除以100就能轉(zhuǎn)成rem葱弟，簡(jiǎn)單方便。
iPhone6的375尺寸下猜丹，font-size則為34.7222px芝加，1rem=34.7222px。
至此射窒，簡(jiǎn)單的適配就已經(jīng)完成藏杖。
但是，問(wèn)題還不僅僅于此轮洋，如此簡(jiǎn)單粗暴的適配制市，會(huì)導(dǎo)致大屏設(shè)備字體過(guò)大或者小屏設(shè)備字體過(guò)小的問(wèn)題。如果適配要求較高弊予，推薦比較大眾比較通用的手淘flexible適配方案祥楣。
以后再嘗試vw適配方案及flexible，并補(bǔ)充記錄汉柒。
