@姬小光 (騰訊前端工程師)：話說從設計稿到前端頁面實現，是產品流程中非常重要的一環，這個階段決定了設計師設計的設計稿能否完美地變成真正的產品雛形。廢話不多說，本文主要介紹以下三塊內容：移動裝置尺寸;前端適配方案;設計師與前端如何對接。
移動裝置尺寸網上專門講解移動裝置尺寸的文章很多，事實上，移動裝置種類之多簡直是噩夢一般。所以，實際在設計或者開發過程中，往往只是選擇幾種裝置作為基準來進行設計和開發，而對於其他情況，則採用一些 適配策略 覆蓋。
目前主流的，是以 iphone4 的 640x960px 或者 iphone6 plus 的 1242x2208px 為基準設計，其他裝置均採取適配策略。我們先假定設計稿是按 640x960px 的規範輸出，先來看看前端的常用適配方案。
前端適配方案前端的適配方案大致分為四種：
1，根據 meta 按比例縮放;
2，根據頁面寬度百分比適應;
3，基於**查詢的響應式方案;
4，rem縮放方案。
1，根據 meta 按比例縮放
這種方案的實現更偏技術，大致原理是根據 裝置的解析度及畫素比
等資訊，計算出頁面的縮放(scale)數值，來進行等比縮放。最終的效果就是基於 640x960px
的設計稿再進行等比縮放，這種實現比較適合某些較多的活動頁面開發，可以使用設計稿上的絕對畫素值進行開發，即設計稿上是 200px 則 css
**中的數值也是 200px。
當然，這種方案也有致命的缺點，即指令碼計算的結果很難覆蓋全部裝置，對於一些計算不準確，或者解析度畫素比未知的裝置，很容易整個頁面異常放大或縮小，直接暴露嚴重 bug。綜上，這種縮放方案可以總結出以下基本特徵：
2，根據頁面寬度百分比適應
曾經很長的一段時間，我們都採用百分比適配方案。例如微信購物入口中的京東購物，目前仍然採用這種方案。
這種方案的主要表現就是，在比基準裝置(如 640x960px)寬的裝置上，頁面元素的 橫向寬度 是按百分比自適應的，但是 高度不會變化。所以，無論遇到什麼裝置，只需要在寬度上進行相容即可滿足，而文字等內容，也可以按照寬度自適應，盡可能充分利用螢幕空間。
而開發時，由於 iphone 以及許多 android 機都具有高解析度螢幕，比如 ip程式設計客棧hone4s 的 retina
螢幕實際畫素點是物理畫素的 兩倍。所以，我們開發時要在 640x960px 的設計稿尺寸的基礎上除以 2，比如設計稿上的高度是 200px，則
css 中就是 height：100px;
關於 retina 螢幕的基本知識，建議大家自己查詢資料，我只挑重點。
3，基於**查詢的響應式方案
響應式設計，曾經乃至現在都是非常時髦的概念，不過在實際應用中，響應式設計還是有其相對狹隘的應用場景。一般除了一些創新的小公司，或者某些專題
**之外，很少會用一套**來適配所有終端。比如 pc，mobile，pad 甚至 iwatch 等，全都用一套**來適配顯然是不科學的。
目前普遍的觀點是，響應式設計更適合專題頁面，或者沒有資源來針對各個終端進行單獨開發的團隊來使用。
響應式設計主要遵循 mobile first，要針對不同裝置給出不同設計方案，並設定合適的 斷點，結合百分比方案，來在不同的裝置顯示不同的布局。
4，rem縮放方案
rem 方案的原理跟 meta 方案非常相似，只不過是更加粗暴地根據裝置的寬度來調整縮放。與 meta 方案不同的是，rem
方案並不是縮放整個頁面，而是頁面上所有的尺寸都是與根元素(html)的字型大小相關的，我們只是根據不同裝置來調整根元素字型大小，則所有尺寸隨之變
化。設計師與前端如何對接了解了上面的一些適配方案之後，作為設計師同學就要首先確定，我的設計稿在不同的裝置上到底需要怎樣的表現?假設遇到了更寬的裝置，是橫向拉寬?還是等比縮放?還是再設計乙個截然不同的布局?
這些前提基本確定了該設計稿會如何實現，當然你所設計的頁面可能是平台的一部分，那麼就要遵循平台既有的縮放規則，否則可能會有一些不匹配的問題。比如 meta 不同的兩個頁面來回切換會產生瞬間放大的 bug 等。
確定好大致的適配方wvjqnrlw向，你還要選擇是基於 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 個字了。作為設計師，只 需要知道大概的計算方式，以及基本的適配方案 就可以了。
最後，也是最重要的，你的團隊一定要有 設計規範，並且有與之對應的 開發規範，這樣才能真正的實現無縫對接。
本文標題: 超實用！寫給設計師的移動頁面適配小知識
本文位址: /news/exp/60077.html
寫給設計師的字偶距調整指南
本文講的是寫給設計師的字偶距調整指南，有橫劃和字臂的字母 f,l,t 字母組合 w 或 v a 順序隨意 t 或 f 跟著小寫的母音字母 行距 就是文字行與行之間的垂直距離。在使用文字處理軟體的時候，應該設定過行距吧，這是個常見的功能。儘管沒什麼必要調整多行文字的字偶距，了解一下改進設計時可以調整哪...
Web 設計師的 50 個超便利工具 2
為你的 建立視覺化標識。來自麻省理工。雖然介面有些亂，但這個工具能把一段文字轉換成各種編碼形式。另乙個網格設計生成器。這個看似簡單的工具，可以幫你查詢某個名字是否還可以註冊網域名稱，商標，已經社會 網路入口。這個工具可以幫你即時預覽各種不同的 web 排版效果，並生成 適用於地圖的配色工具。將獨立的...
10種破除網頁設計師障礙的實用方法
參加ie9 開發大賽 贏取現金大獎 微軟最頂級平台技術會議pdc10 microsoft web平台 優秀專案展示 windows phone 7 msdn開發中心 微軟web 平台優秀專案精選推薦 世界頂級論壇 社群程式 bbsmax 論壇 世界上最大的自承載部落格工具 wordpress 架站必...