話說從設(shè)計(jì)稿到前端頁面實(shí)現(xiàn)，是產(chǎn)品流程中非常重要的一環(huán)，這個(gè)階段決定了設(shè)計(jì)師設(shè)計(jì)的設(shè)計(jì)稿能否完美地變成真正的產(chǎn)品雛形。廢話不多說，本文主要介紹以下三塊內(nèi)容：移動設(shè)備尺寸;前端適配方案;設(shè)計(jì)師與前端如何對接。

　　提高頁面還原度的方法都在這了!

　　移動設(shè)備尺寸

　　網(wǎng)上專門講解移動設(shè)備尺寸的文章很多，事實(shí)上，移動設(shè)備種類之多簡直是噩夢一般。所以，實(shí)際在設(shè)計(jì)或者開發(fā)過程中，往往只是選擇幾種設(shè)備作為基準(zhǔn)來進(jìn)行設(shè)計(jì)和開發(fā)，而對于其他情況，則采用一些 適配策略 覆蓋。

　　目前主流的，是以 iPhone4 的 640x960px 或者 iPhone6 plus 的 1242x2208px 為基準(zhǔn)設(shè)計(jì)，其他設(shè)備均采取適配策略。我們先假定設(shè)計(jì)稿是按 640x960px 的規(guī)范輸出，先來看看前端的常用適配方案。

　　前端適配方案

　　前端的適配方案大致分為四種：1，根據(jù) meta 按比例縮放;2，根據(jù)頁面寬度百分比適應(yīng);3，基于媒體查詢的響應(yīng)式方案;4，REM縮放方案。

　　1，根據(jù) meta 按比例縮放

　　這種方案的實(shí)現(xiàn)更偏技術(shù)，大致原理是根據(jù) 設(shè)備的分辨率及像素比 等信息，計(jì)算出頁面的縮放(scale)數(shù)值，來進(jìn)行等比縮放。最終的效果就是基于 640x960px 的設(shè)計(jì)稿再進(jìn)行等比縮放，這種實(shí)現(xiàn)比較適合某些圖片較多的活動頁面開發(fā)，可以使用設(shè)計(jì)稿上的絕對像素值進(jìn)行開發(fā)，即設(shè)計(jì)稿上是 200px 則 CSS 代碼中的數(shù)值也是 200px。

　　當(dāng)然，這種方案也有致命的缺點(diǎn)，即腳本計(jì)算的結(jié)果很難覆蓋全部設(shè)備，對于一些計(jì)算不準(zhǔn)確，或者分辨率像素比未知的設(shè)備，很容易整個(gè)頁面異常放大或縮小，直接暴露嚴(yán)重 BUG。綜上，這種縮放方案可以總結(jié)出以下基本特征：

　　效果：按設(shè)計(jì)稿等比縮放

　　場景：圖片較多的活動頁面開發(fā)

　　優(yōu)點(diǎn)：可以直接按照設(shè)計(jì)稿像素值開發(fā)

　　缺點(diǎn)：許多設(shè)備無法覆蓋，不斷填坑

　　2，根據(jù)頁面寬度百分比適應(yīng)

　　曾經(jīng)很長的一段時(shí)間，我們都采用百分比適配方案。例如微信購物入口中的京東購物，目前仍然采用這種方案。

　　這種方案的主要表現(xiàn)就是，在比基準(zhǔn)設(shè)備(如 640x960px)寬的設(shè)備上，頁面元素的 橫向?qū)挾?是按百分比自適應(yīng)的，但是 高度不會變化。所以，無論遇到什么設(shè)備，只需要在寬度上進(jìn)行兼容即可滿足，而文本圖片等內(nèi)容，也可以按照寬度自適應(yīng)，盡可能充分利用屏幕空間。

　　而開發(fā)時(shí)，由于 iPhone 以及許多 Android 機(jī)都具有高分辨率屏幕，比如 iPhone4S 的 Retina 屏幕實(shí)際像素點(diǎn)是物理像素的 兩倍。所以，我們開發(fā)時(shí)要在 640x960px 的設(shè)計(jì)稿尺寸的基礎(chǔ)上除以 2，比如設(shè)計(jì)稿上的高度是 200px，則 CSS 中就是 height:100px;

　　關(guān)于 Retina 屏幕的基本知識，建議大家自己查找資料，我只挑重點(diǎn)。

　　效果：按設(shè)計(jì)稿尺寸除以2，元素寬度使用百分比實(shí)現(xiàn)

　　場景：平臺型頁面，頁面布局不是很復(fù)雜

　　優(yōu)點(diǎn)：可以適應(yīng)幾乎所有設(shè)備

　　缺點(diǎn)：橫向拉寬會使布局比例失調(diào)，且復(fù)雜結(jié)構(gòu)百分比實(shí)現(xiàn)有難度

　　3，基于媒體查詢的響應(yīng)式方案

　　響應(yīng)式設(shè)計(jì)，曾經(jīng)乃至現(xiàn)在都是非常時(shí)髦的概念，不過在實(shí)際應(yīng)用中，響應(yīng)式設(shè)計(jì)還是有其相對狹隘的應(yīng)用場景。一般除了一些創(chuàng)新的小公司，或者某些專題網(wǎng)站之外，很少會用一套代碼來適配所有終端。比如 PC，Mobile，Pad 甚至 iWatch 等，全都用一套代碼來適配顯然是不科學(xué)的。

　　目前普遍的觀點(diǎn)是，響應(yīng)式設(shè)計(jì)更適合專題頁面，或者沒有資源來針對各個(gè)終端進(jìn)行單獨(dú)開發(fā)的團(tuán)隊(duì)來使用。

　　響應(yīng)式設(shè)計(jì)主要遵循 Mobile First，要針對不同設(shè)備給出不同設(shè)計(jì)方案，并設(shè)置合適的 斷點(diǎn)，結(jié)合百分比方案，來在不同的設(shè)備顯示不同的布局。

　　效果：不同設(shè)備表現(xiàn)可能截然不同

　　場景：專題網(wǎng)站，小團(tuán)隊(duì)低成本開發(fā)

　　優(yōu)點(diǎn)：不通設(shè)備可以發(fā)揮更多的想象力

　　缺點(diǎn)：要出多套設(shè)計(jì)，且內(nèi)容可能需要取舍

　　4，REM縮放方案

　　REM 方案的原理跟 meta 方案非常相似，只不過是更加粗暴地根據(jù)設(shè)備的寬度來調(diào)整縮放。與 meta 方案不同的是，REM 方案并不是縮放整個(gè)頁面，而是頁面上所有的尺寸都是與根元素(html)的字體大小相關(guān)的，我們只是根據(jù)不同設(shè)備來調(diào)整根元素字體大小，則所有尺寸隨之變化。

　　效果：按照設(shè)計(jì)稿等比縮放

　　場景：活動頁面及部分平臺頁面

　　優(yōu)點(diǎn)：開發(fā)方便，適應(yīng)性好

　　缺點(diǎn)：等比縮放超大會顯得不精致，腳本計(jì)算晚頁面可能跳動

　　設(shè)計(jì)師與前端如何對接

　　了解了上面的一些適配方案之后，作為設(shè)計(jì)師同學(xué)就要首先確定，我的設(shè)計(jì)稿在不同的設(shè)備上到底需要怎樣的表現(xiàn)?假設(shè)遇到了更寬的設(shè)備，是橫向拉寬?還是等比縮放?還是再設(shè)計(jì)一個(gè)截然不同的布局?

　　這些前提基本確定了該設(shè)計(jì)稿會如何實(shí)現(xiàn)，當(dāng)然你所設(shè)計(jì)的頁面可能是平臺的一部分，那么就要遵循平臺既有的縮放規(guī)則，否則可能會有一些不匹配的問題。比如 meta 不同的兩個(gè)頁面來回切換會產(chǎn)生瞬間放大的 BUG 等。

　　確定好大致的適配方向，你還要選擇是基于 640 還是基于 1242 的尺寸進(jìn)行開發(fā)，有人提到 iPhone6 的 750，這里我們可以按照 640 拉寬的情況統(tǒng)一對待。

　　不過要注意的是，Sketch 中默認(rèn) 750 的畫布，可不是按照 640 拉寬來構(gòu)思的，所以如果要在 Sketch 中基于默認(rèn)畫布開發(fā)，要考慮到放在 640 的機(jī)型上 icon 會稍大的情況。

　　如果按照 640 寬度進(jìn)行設(shè)計(jì)，實(shí)際上我們潛在約定了這是個(gè)類似 iPhone4/4S 的 2 倍像素比的設(shè)計(jì)稿。那么，無論采用何種適配方案，我們輸出的 icon 等都是 相當(dāng)于兩倍尺寸的。而在前端開發(fā)過程中，如果采用 meta 方案，則 CSS 中使用實(shí)際尺寸。

　　而如果是百分比方案等，則在樣式中設(shè)置設(shè)計(jì)稿 1/2 的尺寸(對應(yīng)設(shè)備的物理像素)，但 icon 圖片本身還是設(shè)計(jì)稿的尺寸，只是在 Retina 屏幕上需要更多的像素，所以用代碼將其展示時(shí)在設(shè)備上的物理尺寸壓縮到了 1/2。

　　關(guān)于物理像素，CSS像素，像素密度等內(nèi)容，足夠再寫上 10086 個(gè)字了。作為設(shè)計(jì)師，只 需要知道大概的計(jì)算方式，以及基本的適配方案 就可以了。

　　最后，也是最重要的，你的團(tuán)隊(duì)一定要有 設(shè)計(jì)規(guī)范，并且有與之對應(yīng)的 開發(fā)規(guī)范，這樣才能真正的實(shí)現(xiàn)無縫對接。