摘要：從事開發(fā)好多年，但是手機(jī)頁面開發(fā)較晚，所以最開始的時(shí)候，為了做微信應(yīng)用的開發(fā)，各種餓補(bǔ)，但是為了將設(shè)計(jì)稿精準(zhǔn)的適配在各種尺寸的手機(jī)上還是太坑，所以找了些資料后，借鑒了一些成熟的網(wǎng)站，分享出來，歡迎拍磚。

從事PC Web開發(fā)好多年，但是手機(jī)頁面開發(fā)較晚，所以最開始的時(shí)候，為了做微信應(yīng)用的開發(fā)，各種餓補(bǔ)，但是為了將設(shè)計(jì)稿精準(zhǔn)的適配在各種尺寸的手機(jī)上還是太坑，所以找了些資料后，借鑒了一些成熟的網(wǎng)站，分享出來，歡迎拍磚。

首先需要你對viewport有一個(gè)了解，建議看Apple官方文檔，雖然啰嗦，但是啃一遍，基本該明白的就全明白了。

簡便易行，適用情況：

網(wǎng)頁設(shè)計(jì)僅針對手機(jī)屏幕，并且沒有需要根據(jù)手機(jī)屏幕尺寸進(jìn)行UI調(diào)整的內(nèi)容，既沒有媒體查詢的CSS

產(chǎn)品層面可以不考慮非主流設(shè)備或?yàn)g覽器的兼容性，例如黑莓的某些設(shè)備或搜狗瀏覽器這類的不支持640定寬渲染的瀏覽器

當(dāng)手機(jī)橫豎切換時(shí)，能夠容忍部分手機(jī)在橫屏瀏覽網(wǎng)頁時(shí)，可能出現(xiàn)的問題(潛在問題)。

這個(gè)方案是強(qiáng)制讓手機(jī)瀏覽器按640的比例來呈現(xiàn)網(wǎng)頁，讓瀏覽器去做尺寸適配；這個(gè)方案我覺得其實(shí)非常好，絕大多數(shù)的場景都可以支持，而且開發(fā)起來簡單高效，不需要考慮各種尺寸和樣式表的單位換算問題。

這個(gè)方案有點(diǎn)類似css zoom，就是瀏覽器將整個(gè)網(wǎng)頁進(jìn)行了縮放，注意一點(diǎn)：PC端的使用瀏覽器的開發(fā)工具進(jìn)行縮放的時(shí)候，譬如使用iphone 5s 模式預(yù)覽，可能會有問題，比如border:1px的時(shí)候可能會不可見，字體會有些模糊等，但是手機(jī)端展現(xiàn)的時(shí)候不會出現(xiàn)這些問題，因?yàn)榻^大多數(shù)手機(jī)目前屏幕分辨率都足夠高，而且專門針對viewport做了處理，所以這個(gè)問題可以忽略。

測試地址：點(diǎn)擊這里，這個(gè)網(wǎng)頁就是按640定寬做的，可以在多數(shù)尺寸的網(wǎng)頁上做適配

上面這個(gè)不用解釋了，絕大多數(shù)知名網(wǎng)站都這么做的.
很多網(wǎng)站為了能夠讓圖片和字體也做自適應(yīng)，會使用rem來作為單位，然后再啟用javascript判定屏幕寬度，動態(tài)改變html元素的fontsize。

為了方便計(jì)算，通常會默認(rèn)將html的font-size設(shè)置為100px，這樣方便計(jì)算，例如你的網(wǎng)頁字體是16px,只需要寫成0.16rem就行了，然后假如設(shè)計(jì)稿是按640寬度設(shè)計(jì)，切圖的時(shí)候完全按設(shè)計(jì)稿來進(jìn)行單位換算，然后在js中獲取屏幕寬度，根據(jù)比例：100/x = 640/documentWidth 計(jì)算html的字體大小即可，當(dāng)然要加入一個(gè)window.resize事件重新計(jì)算，以防橫豎屏切換。

重要：如果你希望字體不縮放，可以不考慮將font-size設(shè)置為rem

第二種方案有幾個(gè)弊端：

由于背景圖片無法做縮放，(background-size:cover|contain)只能針對單張圖片，而對于sprite css image無力解決，所以這里要求如果有背景圖，全部制作成單張的，然后再加上background-size:cover|contain，這里凸顯出使用css font的好處了...

頁面中的所有單位都需要用rem來計(jì)算，雖然 X/100是很簡單的計(jì)算，但是書寫的時(shí)候還是讓人厭煩。

所有的圖片必須指定寬度，不然圖片會按原始寬度進(jìn)行渲染，當(dāng)屏幕尺寸與設(shè)計(jì)預(yù)期尺寸不一致時(shí)，就會出錯(cuò)了。

根據(jù)上面的描述，我做了兩個(gè)工具：

制作時(shí)依然采用px作為單位，通過watch插件監(jiān)聽css文件的改變，然后動態(tài)轉(zhuǎn)換px2rem。

根據(jù)圖片生成auto convert css icon文件，類似grunt-sprite，但只生成對應(yīng)的css，而不合成圖片,這樣對于將以往的css sprite工具生成的圖片可以低成本切換成單一圖片ICON 開發(fā)思路是這樣：

開發(fā)時(shí)區(qū)分目錄，例如src表示源碼，dest目錄標(biāo)示轉(zhuǎn)換后的靜態(tài)文件，目前上規(guī)模的工程都這么做，應(yīng)該沒什么成本了，然后css依然使用像素作為單位。

通過grunt或gulp插件來監(jiān)聽文件改變，然后做copy,sync之類的處理，同時(shí)這里將css中的px按設(shè)定的比率轉(zhuǎn)換成rem。

不能在網(wǎng)頁中直接嵌入內(nèi)聯(lián)style，或者需要自行轉(zhuǎn)換單位之后嵌入。

監(jiān)聽腳本：
(注：這里假定開發(fā)的時(shí)候依據(jù)的寬度的640，默認(rèn)字體是32像素)

// 根據(jù)屏幕寬度適配字體大小
$(window).on("resize", function () {
  var width = document.documentElement.clientWidth;
  $("html").css("font-size", (width / 640 * 32) + "px");
}).triggerHandler("resize");

測試地址：點(diǎn)擊這里

(因?yàn)槲业墓こ淌褂玫氖莋runt，所以寫的插件也是針對grunt的，如果你打算使用gulp，需要自行實(shí)現(xiàn)上面的工具了)

固定高度，寬度自適應(yīng)

這個(gè)方案其實(shí)就是原生iphone的方案，既在不同尺寸的屏幕上顯示時(shí)，寬度會自適應(yīng)，高度是固定的，字體大小也固定，譬如一個(gè)list元素的高度是44px，無論在iphone5,iphone6,iphone6+它都是44px高，但是寬度是不定的，這個(gè)其實(shí)是一個(gè)標(biāo)準(zhǔn)實(shí)現(xiàn)方案，既高度確定，內(nèi)容寬度自適應(yīng)，字體大小固定。

流行的大公司的H5網(wǎng)站基本都是這么處理的，淘寶在這個(gè)方案的基礎(chǔ)上額外做了1px的適配，因?yàn)樵谝暰W(wǎng)膜雙倍屏上，實(shí)際上使用2px的物理像素來渲染1px的邏輯像素，為了能夠做到精準(zhǔn)的1px，淘寶沒有默認(rèn)寫viewport而是使用js來動態(tài)生成viewport。

當(dāng)然dpr不同，生成的viewport也不一樣，雙倍屏的viewport是0.5, 3倍屏的是0.33333,所有單位使用rem，js根據(jù)不同的倍屏生成一個(gè)基礎(chǔ)的font-size，單倍屏幕是16px，雙倍是32px，3倍是48px，以此類推。

動態(tài)生成viewport額外引出兩個(gè)問題：
1.android的很多機(jī)型不支持動態(tài)生成的viewport，僅在IPHONE上適配良好，
2.原始的css不能再使用px，而要使用rem作為單位。

第一個(gè)問題比較好解決，ua判斷好了，第二個(gè)問題需要在編寫css的時(shí)候動態(tài)轉(zhuǎn)換rem。

(新增)：
由于淘寶的方案比較復(fù)雜，為了1PX的顯示做了非常復(fù)雜的處理，所以放棄了。有個(gè)折中的辦法是對1px的處理做scale縮放，不過這樣可能會在dpr為1的屏幕出現(xiàn)問題，或者在dpr>2的屏幕依然會變粗。
不過這個(gè)方案簡單易行，事實(shí)上微信的UI團(tuán)隊(duì)用的就這個(gè)方案，我參考了他們的解決辦法，實(shí)現(xiàn)了一套自己的UI：使用默認(rèn)的1倍縮放viewport方案，不縮放圖片和字體，放棄自適應(yīng)。1px問題采用scale方案解決。圖片布局問題采用padding-top百分比寬度解決(可以自行百度)

http://exui.legend.life
https://github.com/whosesmile...

第一個(gè)定寬開發(fā)的方案其實(shí)非常適合小團(tuán)隊(duì)做推廣頁面，因?yàn)檫@樣避免了各種工具的整合，降低了開發(fā)復(fù)雜度。

第二個(gè)方案適合需要適應(yīng)絕大多數(shù)尺寸瀏覽器的項(xiàng)目，同時(shí)如果配置好打包工具，可以很大程度降低難度，將開發(fā)和部署解耦，開發(fā)代碼比較清晰。

第三個(gè)方案適合對項(xiàng)目精細(xì)要求度比較高的，成本稍高。