在寫這篇文章之前，我詢問(wèn)了在唯品會(huì)和騰訊的童鞋、以及公司里面前端大神（深哥），對(duì)于設(shè)計(jì)稿切圖的詳細(xì)方法，經(jīng)過(guò)對(duì)比驗(yàn)證，得出設(shè)計(jì)稿轉(zhuǎn)換頁(yè)面單位尺寸方法步驟。我分別詢問(wèn)下面四個(gè)問(wèn)題：
1. 設(shè)計(jì)稿的單位是什么，一般大小是什么？
2. 頁(yè)面長(zhǎng)度單位用什么，px、em、rem，還是混合，如果用rem，html的font-size是多少？
3.?設(shè)計(jì)稿轉(zhuǎn)換成頁(yè)面長(zhǎng)度的方法？
4. 如果做媒體查詢，合適的區(qū)間是什么？
PS：他們都已設(shè)置viewport
Q&A
--朱姐（騰訊）回答
1.?設(shè)計(jì)稿的單位是px，一般是750px。
2. px、rem混合著用，rem的html font-size用16px。
3. 750px的設(shè)計(jì)圖以375px量長(zhǎng)寬，例如設(shè)計(jì)圖里有元素寬度是100px，那么得到寬度會(huì)是 100px/2/16px =?3.125rem。
4. 根據(jù)設(shè)備寬度不同，設(shè)置不同的html 的font-size，這個(gè)區(qū)間并沒(méi)說(shuō)明。
--濱神（唯品會(huì)）回答
1.?設(shè)計(jì)稿的單位是px，一般是?750px。
2. 限制用rem，rem的html font-size用312.5%（由于默認(rèn)字體大小是16px，所以最終是16px *?312.5% = 50px）。
3. 750px的設(shè)計(jì)圖以375px量長(zhǎng)寬，例如設(shè)計(jì)圖里有元素寬度是100px，那么得到寬度會(huì)是 100px/2/50px =?1rem。
4. 如果設(shè)置固定html font-size，那么就需要弄媒體查詢；如果按不同設(shè)備寬度算出各自的font-size，就不用弄媒體查詢。
--深哥（公司大神）回答
1.?設(shè)計(jì)稿的單位是px，一般是1080px。
2.?建議是全部使用rem及百分比的方式，rem的html font-size用100px。
3. 1080px的設(shè)計(jì)圖以540px量長(zhǎng)寬，例如設(shè)計(jì)圖里有元素寬度是100px，那么得到寬度會(huì)是 100px/2/100px = 0.5rem。
4.?按不同設(shè)備寬度算出各自的font-size，如果需要兼容特殊設(shè)備（例如iPad），才要做媒體查詢。如果在iPad上的效果偏大，就要修改小一點(diǎn)字體，一般是76px，就可以跟手機(jī)差不多保持一致的效果了。
--得出結(jié)論
1. 設(shè)計(jì)稿的單位是px（PhotoShop出來(lái)當(dāng)然是這個(gè)）。
2. 沒(méi)人頁(yè)面長(zhǎng)度用em。
3. 元素長(zhǎng)寬量取是設(shè)計(jì)圖里的1/2。
這三個(gè)結(jié)論還并不能得出一個(gè)好的方案。
假設(shè)
為了簡(jiǎn)化問(wèn)題，做一個(gè)假設(shè)，假如世界上只有一種手機(jī)型號(hào)（恰好是iPhone6），那設(shè)計(jì)稿轉(zhuǎn)換的方式是怎么樣的？
（1）. 有張750px的設(shè)計(jì)稿，iPhone6的設(shè)備寬度375，取375為量取大小。
（2）. 那么設(shè)計(jì)稿里面100px，在iPhone6顯示為100px / (750 /375?) = 50px。
（3）. 規(guī)定一個(gè)html font-size值 X（例如50px），那rem值就是 (50/X) rem （例如 50px/ 50px = 1rem）
這里面可以很明顯看到，font-size值并沒(méi)有規(guī)定要用哪個(gè)值，它只是一個(gè)基數(shù)，元素的像素大小并不會(huì)因?yàn)檫@個(gè)基數(shù)有變化（所以上面問(wèn)了三個(gè)人有三個(gè)不同的值，這沒(méi)問(wèn)題的）。也由于我們以375量取大小，所以在iPhone6上效果是與設(shè)計(jì)稿一致的。另外不是rem也是可以的（第三步不做），直接用px， 更加簡(jiǎn)單。
假設(shè)破滅
世界上當(dāng)然有很多亂七八糟的機(jī)型，那如何在上面的基礎(chǔ)上做適配？
（1）. 假如用的是px單位，又不做媒體查詢做適配。那么可能在某些機(jī)型上偏大偏小，但是還能用。之所以可以這么干，是因?yàn)槭謾C(jī)的設(shè)備寬度一般是在320-470之間，與375產(chǎn)生的偏差效果并不會(huì)很大，當(dāng)然偏差越大差異越大。
（2）. 假如用的是px單位，媒體查詢做適配。雖然這么做能適配機(jī)型，讓效果看起來(lái)都差不多，但是做起來(lái)應(yīng)該很痛苦，每個(gè)固定長(zhǎng)度的元素都要寫一遍，這會(huì)是很要命的吧。
（3）.?假如用的是rem單位，不動(dòng)態(tài)計(jì)算font-size值，不做媒體查詢。我靠，那這不是跟第一種情況一樣。
（4）.?假如用的是rem單位，動(dòng)態(tài)計(jì)算font-size值。計(jì)算方式如下：
var baseSize = 50,// 基數(shù)baseWidth = 375,//量取值大小fontSize =? (document.documentElement.clientWidth / baseWidth * baseSize).toFixed(2) ;//這個(gè)就是動(dòng)態(tài)font-size值
這里我有一點(diǎn)沒(méi)有說(shuō)是， 這個(gè)計(jì)算公式是viewport設(shè)置initial-scale=1的情況，如果是其他縮放比例，那就需要乘以這個(gè)縮放比例。
例如：https://m.taobao.com/（淘寶移動(dòng)版）
其viewport：
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
其fontsize計(jì)算方式：
varbaseSize = 75,// 基數(shù)baseWidth = 375,//量取值大小fontSize =? (document.documentElement.clientWidth / baseWidth * baseSize * 0.5 ).toFixed(2) ;
這里面關(guān)鍵的是那個(gè)375的基礎(chǔ)量取值，當(dāng)取375時(shí)，頁(yè)面效果在設(shè)備寬度為375就必須顯示正常，這個(gè)是很關(guān)鍵的約定。
（5）.?假如用的是rem單位，媒體查詢做適配。 在各個(gè)媒體查詢的區(qū)間設(shè)置適當(dāng)?shù)膄ont-size，沒(méi)什么特別的。
最終方案
根據(jù)上面的情況，我覺得轉(zhuǎn)換的方式可以用下面步驟。
（1）. 設(shè)計(jì)稿應(yīng)有約定的大小（例750px），選取一個(gè)手機(jī)的設(shè)備寬度做量取大小值（例375）。
（2）. 限制使用rem，選取一個(gè)font-size值作為的基數(shù)。
（3）. 計(jì)算每個(gè)元素的rem值，進(jìn)行界面開發(fā)。
（4）. js計(jì)算當(dāng)前設(shè)備寬度的fontSize，并設(shè)置回html元素上。（適配步驟）
（5）. 媒體查詢作為補(bǔ)救措施，特殊設(shè)備寬度設(shè)置特殊的font-size。（這步不是必須的）
注意
（1）. px可以用，但是當(dāng)心效果會(huì)偏大或偏小，元素可能還會(huì)往下掉。
（2）.?界面開發(fā)時(shí)只針對(duì)iPhone6（375pt）一種機(jī)型，頁(yè)面完成后，才做適配步驟。
（3）. 設(shè)計(jì)師可能會(huì)輸出標(biāo)注圖（750px）和@3x切圖（1125px）兩種圖。用@3x切圖的設(shè)計(jì)稿切圖，在超清屏幕才能清晰；標(biāo)注圖可用來(lái)計(jì)算元素長(zhǎng)寬；但是設(shè)計(jì)師可能為了簡(jiǎn)單，就只輸出一種視覺圖，就如文章開頭說(shuō)的750px、1080px。
（4）. 使用sass或less可以讓代碼寫得直觀、簡(jiǎn)單。
例如：
padding: rem(5) rem(15) 0 rem(15);
這樣尺寸都是對(duì)應(yīng)的設(shè)計(jì)稿的尺寸，開發(fā)人員就不用關(guān)心里面的實(shí)現(xiàn)細(xì)節(jié)了。
總結(jié)
設(shè)計(jì)稿轉(zhuǎn)換頁(yè)面單位尺寸，簡(jiǎn)單做就是——先針對(duì)某個(gè)機(jī)型做，再做適配。
