[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)