[TOC] # 移動Web開發與設計師的協作 在寫這篇文章之前，我詢問了在唯品會和騰訊的童鞋、以及公司里面前端大神（深哥），對于設計稿切圖的詳細方法，經過對比驗證，得出設計稿轉換頁面單位尺寸方法步驟。我分別詢問下面四個問題： 1. 設計稿的單位是什么，一般大小是什么？ 2. 頁面長度單位用什么，`px`、`em`、`rem`，還是混合，如果用`rem`，`html`的`font-size`是多少？ 3. 設計稿轉換成頁面長度的方法？ 4. 如果做媒體查詢，合適的區間是什么？ *PS：他們都已設置viewport* ## Q&A **--朱姐（騰訊）回答** 1. 設計稿的單位是`px`，一般是`750px`。 2. `px、rem`混合著用，`rem`的`html font-size`用`16px`。 3. `750px`的設計圖以`375px`量長寬，例如設計圖里有元素寬度是100px，那么得到寬度會是 `100px/2/16px = 3.125rem`。 4. 根據設備寬度不同，設置不同的`html` 的`font-size`，這個區間并沒說明。 **--濱神（唯品會）回答** 1. 設計稿的單位是`px`，一般是 `750px`。 2. 限制用`rem`，`rem`的`html font-size`用312.5%（由于默認字體大小是`16px`，所以最終是`16px * 312.5% = 50px`）。 3. `750px`的設計圖以`375px`量長寬，例如設計圖里有元素寬度是`100px`，那么得到寬度會是 `100px/2/50px = 1rem`。 4. 如果設置固定`html font-size`，那么就需要弄媒體查詢；如果按不同設備寬度算出各自的font-size，就不用弄媒體查詢。 **--深哥（公司大神）回答** 1. 設計稿的單位是`px`，一般是`1080px`。 2. 建議是全部使用rem及百分比的方式，`rem`的`html font-size`用`100px`。 3. `1080px`的設計圖以`540px`量長寬，例如設計圖里有元素寬度是`100px`，那么得到寬度會是 `100px/2/100px = 0.5rem`。 4. 按不同設備寬度算出各自的font-size，如果需要兼容特殊設備（例如iPad），才要做媒體查詢。如果在iPad上的效果偏大，就要修改小一點字體，一般是76px，就可以跟手機差不多保持一致的效果了。 **--得出結論** 1. 設計稿的單位是`px`（PhotoShop出來當然是這個）。 2. 沒人頁面長度用`em`。 3. 元素長寬量取是設計圖里的1/2。 這三個結論還并不能得出一個好的方案。 ## 假設 為了簡化問題，做一個假設，假如世界上只有一種手機型號（恰好是iPhone6），那設計稿轉換的方式是怎么樣的？ 1. 有張 750px 的設計稿，iPhone6 的設備寬度 375，取 375 為量取大小。 2. 那么設計稿里面`100px`，在iPhone6顯示為`100px / (750 /375 ) = 50px`。 3. 規定一個`html font-size`值 X（例如50px），那rem值就是 `(50/X) rem` （例如 `50px/ 50px = 1rem`） 這里面可以很明顯看到，`font-size`值并沒有規定要用哪個值，它只是一個基數，元素的像素大小并不會因為這個基數有變化（所以上面問了三個人有三個不同的值，這沒問題的）。也由于我們以375量取大小，所以在iPhone6上效果是與設計稿一致的。另外不是`rem`也是可以的（第三步不做），直接用`px`， 更加簡單。 ## 假設破滅 世界上當然有很多亂七八糟的機型，那如何在上面的基礎上做適配？ 1. 假如用的是 px 單位，又不做媒體查詢做適配。那么可能在某些機型上偏大偏小，但是還能用。之所以可以這么干，是因為手機的設備寬度一般是在320-470之間，與375產生的偏差效果并不會很大，當然偏差越大差異越大。 2. 假如用的是 px 單位，媒體查詢做適配。雖然這么做能適配機型，讓效果看起來都差不多，但是做起來應該很痛苦，每個固定長度的元素都要寫一遍，這會是很要命的吧。 3. 假如用的是rem單位，不動態計算`font-size`值，不做媒體查詢。我靠，那這不是跟第一種情況一樣。 4. 假如用的是rem單位，動態計算`font-size`值。計算方式如下： ```js var baseSize = 50, // 基數 baseWidth = 375, //量取值大小 fontSize = (document.documentElement.clientWidth / baseWidth * baseSize).toFixed(2) ; //這個就是動態font-size值 ``` 這里我有一點沒有說是， 這個計算公式是viewport設置initial-scale=1的情況，如果是其他縮放比例，那就需要乘以這個縮放比例。 例如：[https://m.taobao.com/（淘寶移動版）](https://m.taobao.com/%EF%BC%88%E6%B7%98%E5%AE%9D%E7%A7%BB%E5%8A%A8%E7%89%88%EF%BC%89) 其`viewport`： ```html <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"> ``` 其`fontsize`計算方式： ```js var baseSize = 50, // 基數 baseWidth = 375, //量取值大小 fontSize = (document.documentElement.clientWidth / baseWidth * baseSize * 0.5 ).toFixed(2) ; ``` 這里面關鍵的是那個375的基礎量取值，**當取375時，頁面效果在設備寬度為375就必須顯示正常**，這個是很關鍵的約定。 1. 假如用的是rem單位，媒體查詢做適配。 在各個媒體查詢的區間設置適當的font-size，沒什么特別的。 ## 最終方案 根據上面的情況，我覺得轉換的方式可以用下面步驟。 1. 設計稿應有約定的大小（例`750px`），選取一個手機的設備寬度做量取大小值（例`375`）。 2. 限制使用`rem`，選取一個`font-size`值作為的基數。 3. 計算每個元素的`rem`值，進行界面開發。 4. js計算當前設備寬度的`fontSize`，并設置回`html`元素上。（適配步驟） 5. 媒體查詢作為補救措施，特殊設備寬度設置特殊的`font-size`。（這步不是必須的） ### 注意 1. `px`可以用，但是當心效果會偏大或偏小，元素可能還會往下掉。 2. 界面開發時只針對iPhone6（`375pt`）一種機型，頁面完成后，才做適配步驟。 3. 設計師可能會輸出標注圖（`750px`）和@3x切圖（`1125px`）兩種圖。用@3x切圖的設計稿切圖，在超清屏幕才能清晰；標注圖可用來計算元素長寬；但是設計師可能為了簡單，就只輸出一種視覺圖，就如文章開頭說的`750px`或者`1080px`。 4. 使用`sass`或`less`可以讓代碼寫得直觀、簡單。 例如： ```css padding: rem(5) rem(15) 0 rem(15); ``` 這樣尺寸都是對應的設計稿的尺寸，開發人員就不用關心里面的實現細節了。 ## 如何與設計協作 前端與設計師的協作應該是比較簡單的，最重要的是要規范設計提供給你的產物，通常對于前端來說，我們需要設計師提供標注尺寸后的設計稿以及各種元素的切圖文件，有了這些就可以開始布局了。 考慮到Retina顯示屏以及這么多移動設備分辨率卻不一樣的問題，那么設計師應該提供多套設計稿嗎？ 從網易和淘寶的做法來看，應該是不用了，我們可以按照設計稿，先做出一套布局，按照以上方法做適配，由于是等比適配，所以各個設備的視覺效果差異應該會很小，當然也排除不了一些需要媒介查詢特殊處理的情況，這肯定避免不了的。下面這張圖是淘寶設計師分享的他們的工作流程：  解釋一下就是： **第一步：** 視覺設計階段，設計師按寬度`750px`（iPhone 6）做設計稿，除圖片外所有設計元素用矢量路徑來做。設計定稿后在`750px`的設計稿上做標注，輸出標注圖。同時等比放大1.5倍生成寬度`1125px`的設計稿，在`1125px`的稿子里切圖。 **第二步：** 輸出兩個交付給開發工程師：一個是程序用到的`@3x`切圖資源，另一個是寬度`750px`的設計標注圖。 **第三步：** 開發工程師拿到`750px`標注圖和`@3x`切圖資源，完成iPhone 6（375pt）的界面開發。此階段不能用固定寬度的方式開發界面，得用自動布局（auto layout），方便后續適配到其它尺寸。 **第四步：** 適配調試階段，基于iPhone 6的界面效果，分別向上向下調試iPhone 6 plus（`414pt`）和iPhone 5S及以下（`320pt`）的界面效果。由此完成大中小三屏適配。 注意第三步，就要使用我們以上介紹的網易跟淘寶的適配方法了。假如公司設計稿不是基于`750px`的怎么辦，其實很簡單，按上圖做一些相應替換即可，但是流程和方法還是一樣的。 解釋一下為什么要在`@3x`的圖里切，這是因為現在市面上也有不少像魅藍note這種超高清屏幕，`devicePixelRatio`已經達到3了，這個切圖保證在所有設備都清晰顯示。 ## 總結 設計稿轉換頁面單位尺寸，簡單做就是——先針對某個機型做，再做適配。 目前日常工作當中，視覺設計師給到前端開發人員手中的視覺稿尺寸一般是基于`640px`、`750px`（常用）以及`1125px`寬度為準。甚至為什么？大家應該懂的（考慮 Retina 屏）。 ## 參考 [移動端界面設計之尺寸篇（更新）](http://www.xueui.cn/tutorials/app-tutorials/mobile-ui-design-size.html) https://blog.tanteng.me/2015/06/pc-mobile-adapter/ [移動開發之設計稿轉換頁面單位尺寸](http://www.cnblogs.com/lovesong/p/5439756.html) [從網易與淘寶的font-size思考前端設計稿與工作流](http://www.cnblogs.com/lyzg/p/4877277.html) [移動端設計尺寸](http://www.ui001.com/chicun/) [在線px->rem](http://520ued.com/tools/rem)