寫(xiě)在前面
??作為一名程序員浩峡，在拿到美工MM的設(shè)計(jì)稿時(shí)可岂，腦海里肯定回想，怎么才能完美的將美工MM通過(guò)程序給copy出來(lái)呢?（ps:開(kāi)玩笑翰灾，將美工MM的設(shè)計(jì)稿完美的用代碼呈現(xiàn)出來(lái) ^ _ ^）缕粹。因?yàn)椴还茉诎沧窟€是蘋(píng)果稚茅，每款手機(jī)都有一個(gè)固定的屏幕尺寸，而程序員要做的是將美工的設(shè)計(jì)稿完美的呈現(xiàn)在不同的設(shè)備上致开，那么對(duì)于機(jī)型的適配必不可少峰锁。因此，今天就想來(lái)談?wù)剻C(jī)型適配方面的問(wèn)題双戳。
??首先虹蒋，我們都知道，在安卓的大家庭里面各種各樣的屏幕都會(huì)有飒货，是沒(méi)有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)的魄衅，因此，在不同的設(shè)備上塘辅，我們需要根據(jù)屏幕的大小來(lái)對(duì)我們的APP做等比例的縮放處理晃虫，也就是所謂的適配。當(dāng)然扣墩，和安卓開(kāi)發(fā)有一點(diǎn)不同的是哲银，使用HTML5開(kāi)發(fā)是不能使用安卓或IOS原生開(kāi)發(fā)的那些適配方式，只能使用web端的一些適配方式呻惕，以下三種是我接觸過(guò)的適配方式荆责，我就簡(jiǎn)單的和大家談?wù)勎覍?duì)他們的簡(jiǎn)單理解：（ps：如有更好的適配方式，建議或意見(jiàn)還請(qǐng)各位大大指出亚脆，感激不盡^ _ ^）
px+百分比方式適配
??在我看來(lái)做院，這種適配方式應(yīng)該是最簡(jiǎn)單的，將寬度全部使用百分比的形式處理濒持，而高度根據(jù)設(shè)計(jì)稿給出的高度來(lái)處理键耕。并且對(duì)于各種設(shè)備都是挺友好，但是我發(fā)現(xiàn)有一個(gè)問(wèn)題就是柑营，對(duì)設(shè)計(jì)稿的還原度不是很高屈雄，因?yàn)樵O(shè)計(jì)稿上應(yīng)該標(biāo)的寬度和高度都是px，（ps：找美工MM把寬度改成百分比來(lái)表示也不失為一種辦法官套，^ _ ^）因此有時(shí)候得到的頁(yè)面效果不是很理想棚亩，畢竟設(shè)計(jì)者是按照每個(gè)像素每個(gè)像素?fù)傅模缓笪覀兡玫胶髱讉€(gè)像素幾個(gè)像素的誤差來(lái)做虏杰，還是有點(diǎn)說(shuō)不通讥蟆。因此，我覺(jué)得對(duì)于簡(jiǎn)單的應(yīng)用或者對(duì)界面要求不高的界面可以使用這種方式來(lái)做纺阔。
viewport方式適配
??這種方式理解起來(lái)可能要難一點(diǎn)瘸彤，不過(guò)其實(shí)還是很簡(jiǎn)單的，我這里講的可能比較的簡(jiǎn)單笛钝，具體的這種方法的應(yīng)用质况，各位可以自行百度愕宋，下面我就簡(jiǎn)單的說(shuō)說(shuō)這種適配方式。
??首先我們都知道HTML5里面有個(gè)<meta /> 標(biāo)簽结榄，并且有個(gè)viewport屬性
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
??在做手機(jī)端網(wǎng)頁(yè)的時(shí)候中贝，都會(huì)加入這樣一段代碼，具體的意思我就不解釋了臼朗，這行代碼讓我們的網(wǎng)頁(yè)不進(jìn)行縮放邻寿，我們可以稍微做點(diǎn)改變
<meta name="viewport"content="width=320,maximum-scale=1.2,user-scalable=no">
??經(jīng)過(guò)我們的改造后，讓網(wǎng)頁(yè)的寬度固定到了320px视哑，并且縮放1.1倍绣否，那么320X1.2=384,是不是和我們的蘋(píng)果6的屏幕分辨率差不多寬。通過(guò)這個(gè)例子挡毅，我們可以思考：設(shè)計(jì)稿的寬度是固定的蒜撮，而我們?cè)诓煌脑O(shè)備上，根據(jù)我們不同的屏幕寬度跪呈，縮放我們頁(yè)面倍數(shù)是否就行了呢段磨？這就是我們viewport的適配原理。
??這種適配方式想要適配不同機(jī)型耗绿，還需要搭配媒體查詢苹支，或是JS動(dòng)態(tài)計(jì)算。
??使用媒體查詢時(shí)缭乘，我們需要具體的知道需要適配的屏幕精確的屏幕寬度或者范圍沐序，一般是使用范圍進(jìn)行適配琉用，當(dāng)遇到比較特殊的情況再單獨(dú)處理堕绩，還可以在頁(yè)面未渲染時(shí)，
??使用JS動(dòng)態(tài)計(jì)算時(shí)邑时，需要獲取屏幕寬度做一個(gè)計(jì)算奴紧，然后根據(jù)計(jì)算到的倍數(shù)精確的設(shè)置頁(yè)面縮放的倍數(shù)。
??兩種方式各有利弊晶丘，使用媒體查詢比較的麻煩黍氮，并且可能有些尺寸我們沒(méi)考慮到，而使用JS動(dòng)態(tài)計(jì)算浅浮，會(huì)降低頁(yè)面渲染時(shí)間沫浆，我們都知道JS的執(zhí)行是阻塞頁(yè)面渲染的。
rem適配
??最后一種適配方案滚秩，也是我現(xiàn)在使用的一種方式专执，也是有利有弊，且聽(tīng)我慢慢嘮叨_
??首先我們都知道em和rem郁油，并且我就默認(rèn)大家都知道這兩個(gè)單位是干嘛的了（不知道的可以自行百度喲）我們要做的事是什么呢本股，將網(wǎng)頁(yè)的根元素的font-size設(shè)置一個(gè)動(dòng)態(tài)計(jì)算到的值攀痊，然后將頁(yè)面上所有的尺寸換成rem來(lái)處理，簡(jiǎn)單的說(shuō)就是
將html設(shè)置為font-size:100px拄显，即100px=1rem苟径。(設(shè)置100px是為了方便計(jì)算)那么可以將大部分px單位除以100就可以直接改成rem單位了。
??比如我們的設(shè)計(jì)稿是720X1280躬审，那么720/100=7.2rem棘街，如果我們有一個(gè)元素的寬度是占滿整個(gè)設(shè)計(jì)稿的，那么我們是不是就可以設(shè)置他的高度是7.2rem了呢盒件？此時(shí)是不是就能夠完美的還原設(shè)計(jì)稿呢蹬碧？那么這樣和我們的適配又有什么關(guān)系呢？
??我們剛剛說(shuō)了炒刁，當(dāng)我們的設(shè)計(jì)稿寬度是720px恩沽，html的font-size:100px，整個(gè)html頁(yè)面的寬高等只要使用了rem的是不是都是跟著font-size的大小變化的呢翔始？那么假如我們改變html的font-size的大小罗心，整個(gè)頁(yè)面也跟著改變了呢？這就是我們的rem適配原理城瞎。
??通過(guò)剛剛簡(jiǎn)單的解釋渤闷，大家應(yīng)該已經(jīng)懂了rem的適配原理，最重要的肯定就是怎么來(lái)改變font-size的大小脖镀，同樣飒箭，我們有兩種方式，媒體查詢和JS動(dòng)態(tài)計(jì)算蜒灰。
??媒體查詢我就不多講了弦蹂，因?yàn)楹蛌iewport適配方式差不多，就不多做贅述强窖。
??JS動(dòng)態(tài)計(jì)算凸椿，肯定是計(jì)算我們html的font-size大小，剛剛我們是以720的設(shè)計(jì)稿舉例翅溺，但是我們要思考脑漫，手機(jī)屏幕只有375，這個(gè)時(shí)候應(yīng)該怎么辦呢咙崎，簡(jiǎn)單的數(shù)學(xué)問(wèn)題优幸，我相信都能想到，等比例縮放嘛褪猛。x=375*100/720网杆，此時(shí)的x就是我們的font-size大小。當(dāng)我們的font-size大小變了，整個(gè)頁(yè)面使用rem表示的元素是不是也就相應(yīng)改變了呢跛璧。
??當(dāng)然严里，這種方式有個(gè)弊端我想大家應(yīng)該還是猜到了，會(huì)加大HTML渲染時(shí)的計(jì)算量追城，但是對(duì)于現(xiàn)在的手機(jī)來(lái)說(shuō)刹碾，問(wèn)題不大（^ _ ^）。經(jīng)過(guò)我大概的測(cè)試了下座柱，對(duì)于安卓4.4以上的手機(jī)來(lái)說(shuō)迷帜，應(yīng)該都是沒(méi)有問(wèn)題的，此方案也是許多混合開(kāi)發(fā)的APP或者WEBAPP采用的適配方案色洞。但是還是有很多局限性戏锹，就不一一贅述了。
??補(bǔ)充一句：很多人對(duì)文字的大小也使用的rem（當(dāng)然也包括我火诸，偷懶 ^ _ ^ ）锦针，其實(shí)正確的字體適配應(yīng)該使用媒體查詢加em來(lái)做，因?yàn)閞em計(jì)算出來(lái)的大小可能在某些設(shè)備上會(huì)出現(xiàn)字體模糊或者有毛邊等現(xiàn)象置蜀，如果對(duì)應(yīng)用的精度要求很高奈搜，可以考慮字體單獨(dú)適配。
后記
??通過(guò)對(duì)三種適配方式的講解盯荤，我相信大家對(duì)各個(gè)適配方式的利弊都有了簡(jiǎn)單的認(rèn)識(shí)馋吗，具體在開(kāi)發(fā)過(guò)程中使用哪種方式，其實(shí)更多的需要根據(jù)我們的項(xiàng)目去選擇秋秤，每個(gè)適配方式都有自己的優(yōu)點(diǎn)和缺點(diǎn)宏粤，所以我們應(yīng)該靈活選取。最后灼卢，我想說(shuō)的是三種方式我都用過(guò)绍哎，但是最后一種方式我感覺(jué)是最能完美還原美工設(shè)計(jì)稿的一種適配方式。
??以上內(nèi)容僅為自己的學(xué)習(xí)過(guò)程芥玉，歡迎大家取其精華蛇摸，丟其糟粕备图，找到自己的學(xué)習(xí)狀態(tài)灿巧。若對(duì)以上內(nèi)容有不同簡(jiǎn)介或看法，歡迎一起探討揽涮。
企鵝號(hào)：1041415167 郵箱地址：zth1041415167@outlook.com
附部分學(xué)習(xí)資料地址：
- forked from dcloudio DCloud開(kāi)源項(xiàng)目集錦
- 問(wèn)答社區(qū)
- rem適配JS庫(kù)（淘寶試用方案） forked from amfe/lib-flexible
- MUI框架視頻教程地址
（ps：以上內(nèi)容可能會(huì)不定期修改更新抠藕，距離上一次的更新已經(jīng)很久了，一方面原因是前陣時(shí)間比較的忙蒋困，還有個(gè)原因盾似，最近變懶了^ _ ^，下一篇筆記將會(huì)簡(jiǎn)單的談?wù)刦lex等頁(yè)面布局，并且在最近更新出來(lái)零院，希望有興趣的小伙伴多多關(guān)注８仍尽）
