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

移動設備尺寸

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

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

前端適配方案

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

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

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

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

效果：按設計稿等比縮放
場景：圖片較多的活動頁面開發(fā)
優(yōu)點：可以直接按照設計稿像素值開發(fā)
缺點：許多設備無法覆蓋，不斷填坑

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

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

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

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

關于 Retina 屏幕的基本知識，建議大家自己查找資料，我只挑重點。

效果：按設計稿尺寸除以2，元素寬度使用百分比實現(xiàn)
場景：平臺型頁面，頁面布局不是很復雜
優(yōu)點：可以適應幾乎所有設備
缺點：橫向拉寬會使布局比例失調，且復雜結構百分比實現(xiàn)有難度

3，基于媒體查詢的響應式方案

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

目前普遍的觀點是，響應式設計更適合專題頁面，或者沒有資源來針對各個終端進行單獨開發(fā)的團隊來使用。

響應式設計主要遵循 Mobile First，要針對不同設備給出不同設計方案，并設置合適的 斷點，結合百分比方案，來在不同的設備顯示不同的布局。

效果：不同設備表現(xiàn)可能截然不同
場景：專題網(wǎng)站，小團隊低成本開發(fā)
優(yōu)點：不通設備可以發(fā)揮更多的想象力
缺點：要出多套設計，且內容可能需要取舍

4，REM縮放方案

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

效果：按照設計稿等比縮放
場景：活動頁面及部分平臺頁面
優(yōu)點：開發(fā)方便，適應性好
缺點：等比縮放超大會顯得不精致，腳本計算晚頁面可能跳動

設計師與前端如何對接

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

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

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

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

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

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

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

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

本文來源于成都網(wǎng)站建設公司與成都網(wǎng)站設計制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)站標題：移動頁面適配小知識
網(wǎng)站地址：http://www.aaarwkj.com/news20/315370.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、自適應網(wǎng)站、響應式網(wǎng)站、網(wǎng)站改版、電子商務、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)