移动装置尺寸

　　网上专门讲解移动装置尺寸的文章很多，事实上，移动装置种类之多简直是噩梦一般。所以，实际在设计或者开发过程中，往往只是选择几种装置作为基准来进行设计和开发，而对于其他情况，则采用一些适配策略覆盖。

　　目前主流的，是以 iPhone 4 的 640x960px 或者 iPhone 6 plus 的 1242x2208px 为基准设计，其他装置均采取适配策略。我们先假定设计稿是按 640x960px 的规范输出，先来看看前端的常用适配方案。

　　前端适配方案

　　前端的适配方案大致分为四种：

　　1 、根据 meta 按比例缩放

　　这种方案的实现更偏技术，大致原理是根据装置的解析度及画素比等资讯，计算出页面的缩放 (scale) 数值，来进行等比缩放。终的效果就是基于 640x960px 的设计稿再进行等比缩放，这种实现比较适合某些图片较多的活动页面开发，可以使用设计稿上的绝对画素值进行开发，即设计稿上是 200px 则 CSS 代码中的数值也是 200px 。

　　当然，这种方案也有致命的缺点，即指令码计算的结果很难覆盖全部装置，对于一些计算不准确，或者解析度画素比未知的装置，很容易整个页面异常放大或缩小，直接暴露严重 BUG 。综上，这种缩放方案可以总结出以下基本特征：

　　效果：按设计稿等比缩放。
　　场景：图片较多的活动页面开发。
　　优点：可以直接按照设计稿画素值开发。
　　缺点：许多装置无法覆盖，不断填坑。

　　2 、根据页面宽度百分比适应

　　曾经很长的一段时间，我们都采用百分比适配方案。例如 WordPress 微信购物入口中的京东购物，目前仍然采用这种方案。

　　这种方案的主要表现就是，在比基准装置 (如 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 个字了。作为设计师，只需要知道大概的计算方式，以及基本的适配方案就可以了。

　　后，也是重要的，一个开发团队一定要有设计规范，并且有与之对应的开发规范，这样才能真正的实现无缝对接。