移動設備尺寸
網上專門講解移動設備尺寸的文章很多，事實上，移動設備種類之多簡直是噩夢一般。所以，實際在設計或者開發過程中，往往只是選擇幾種設備作為基準來進行設計和開發，而對于其他情況，則采用一些適配策略覆蓋。
目前主流的，是以iphone 4的640x960px或者iphone 6 plus的1242x2208px為基準設計，其他設備均采取適配策略。我們先假定設計稿是按640x960px的規范輸出，先來看看前端的常用適配方案。
前端適配方案
前端的適配方案大致分為四種：
1、根據meta按比例縮放
這種方案的實現更偏技術，大致原理是根據設備的分辨率及像素比等信息，計算出頁面的縮放(scale)數值，來進行等比縮放。最終的效果就是基于640x960px的設計稿再進行等比縮放，這種實現比較適合某些圖片較多的活動頁面開發，可以使用設計稿上的絕對像素值進行開發，即設計稿上是200px則css代碼中的數值也是200px。
當然，這種方案也有致命的缺點，即腳本計算的結果很難覆蓋全部設備，對于一些計算不準確，或者分辨率像素比未知的設備，很容易整個頁面異常放大或縮小，直接暴露嚴重bug。綜上，這種縮放方案可以總結出以下基本特征：
效果：按設計稿等比縮放。
場景：圖片較多的活動頁面開發。
優點：可以直接按照設計稿像素值開發。
缺點：許多設備無法覆蓋，不斷填坑。
2、根據頁面寬度百分比適應
曾經很長的一段時間，我們都采用百分比適配方案。例如微信購物入口中的京東購物，目前仍然采用這種方案。
這種方案的主要表現就是，在比基準設備(如640x960px)寬的設備上，頁面元素的橫向寬度是按百分比自適應的，但是高度不會變化。所以，無論遇到什么設備，只需要在寬度上進行兼容即可滿足，而文本圖片等內容，也可以按照寬度自適應，盡可能充分利用屏幕空間。
而開發時，由于iphone以及許多android機都具有高分辨率屏幕，比如iphone 4s的retina屏幕實際像素點是物理像素的兩倍。所以，我們開發時要在640x960px的設計稿尺寸的基礎上除以2，比如設計稿上的高度是200px，則css中就是height：100px;
關于retina屏幕的基本知識，建議大家自己查找資料，我只挑重點。
效果：按設計稿尺寸除以2，元素寬度使用百分比實現。
場景：平臺型頁面，頁面布局不是很復雜。
優點：可以適應幾乎所有設備。
缺點：橫向拉寬會使布局比例失調，且復雜結構百分比實現有難度。
3、基于媒體查詢的響應式方案
響應式設計，曾經乃至現在都是非常時髦的概念，不過在實際應用中，響應式設計還是有其相對狹隘的應用場景。一般除了一些創新的小公司，或者某些專題網站之外，很少會用一套代碼來適配所有終端。比如pc，mobile，pad甚至iwatch等，全都用一套代碼來適配顯然是不科學的。
目前普遍的觀點是，響應式設計更適合專題頁面，或者沒有資源來針對各個終端進行單獨開發的團隊來使用。
響應式設計主要遵循mobilefirst，要針對不同設備給出不同設計方案，并設置合適的斷點，結合百分比方案，來在不同的設備顯示不同的布局。
效果：不同設備表現可能截然不同。
場景：專題網站，小團隊低成本開發。
優點：不通設備可以發揮更多的想象力。
缺點：要出多套設計，且內容可能需要取舍。
4、rem縮放方案
rem方案的原理跟meta方案非常相似，只不過是更加粗暴地根據設備的寬度來調整縮放。與meta方案不同的是，rem方案并不是縮放整個頁面，而是頁面上所有的尺寸都是與根元素(html)的字體大小相關的，我們只是根據不同設備來調整根元素字體大小，則所有尺寸隨之變化。
效果：按照設計稿等比縮放。
場景：活動頁面及部分平臺頁面。
優點：開發方便，適應性好。
缺點：等比縮放超大會顯得不精致，腳本計算晚頁面可能跳動。
設計師與前端如何對接
了解了上面的一些適配方案之后，作為設計師就要首先確定，我的設計稿在不同的設備上到底需要怎樣的表現?假設遇到了更寬的設備，是橫向拉寬?還是等比縮放?還是再設計一個截然不同的布局?
這些前提基本確定了該設計稿會如何實現，當然你所設計的頁面可能是平臺的一部分，那么就要遵循平臺既有的縮放規則，否則可能會有一些不匹配的問題。比如meta不同的兩個頁面來回切換會產生瞬間放大的bug等。
確定好大致的適配方向，你還要選擇是基于640還是基于1242的尺寸進行開發，有人提到iphone6的750，這里我們可以按照640拉寬的情況統一對待。
不過要注意的是，sketch中默認750的畫布，可不是按照640拉寬來構思的，所以如果要在sketch中基于默認畫布開發，要考慮到放在640的機型上icon會稍大的情況。
如果按照640寬度進行設計，實際上我們潛在約定了這是個類似iphone4/4s的2倍像素比的設計稿。那么，無論采用何種適配方案，我們輸出的icon等都是相當于兩倍尺寸的。而在前端開發過程中，如果采用meta方案，則css中使用實際尺寸。
而如果是百分比方案等，則在樣式中設置設計稿1/2的尺寸(對應設備的物理像素)，但icon圖片本身還是設計稿的尺寸，只是在retina屏幕上需要更多的像素，所以用代碼將其展示時在設備上的物理尺寸壓縮到了1/2。
關于物理像素，css像素，像素密度等內容，足夠再寫上10086個字了。作為設計師，只需要知道大概的計算方式，以及基本的適配方案就可以了。
最后，也是最重要的，一個開發團隊一定要有設計規范，并且有與之對應的開發規范，這樣才能真正的實現無縫對接。


小程序互選定制廣告為開發者帶來了什么？
做網站時客戶為什么都喜歡找本地的網站制作公司呢？
網站建設在未來的發展趨勢
為什么中小企業網絡營銷越來越難做？
網站建設中 如何兼顧用戶體驗與情感設計
讓用戶對你網站不離不棄的三大法則
游戲行業網站建設如何通過內容提高權重
百度即將打擊快排怎么避免誤傷？