移动端设计与实现最佳方案

常识：
device-width == 设备物理分辨率 / ( devicePixelRatio * scale)

基本规则：
文字流式，控件弹性，图片等比缩放

方案1（网易做法）：
1、
2、通过js计算html的font-size：
var fz = document.documentElement.clientWidth / (设计稿宽度 / 100) + px
document.documentElement.style.fontSize = fz;
3、css中 font-size 使用px配合媒体查询， 其他用rem（设计稿设计的大小/100 + rem）
4、deviceWidth 大于640时， 使用pc版


方案2（淘宝的做法）：
1、根据devicePixelRatio动态设置scale
var scale = 1 / devicePixelRatio
2、计算html的font-size
var fz = document.documentElement.clientWidth / 10 + px
3、css中 font-size 使用px配合媒体查询， 其他用rem（设计稿标注尺寸 / 设计稿横向分辨率 / 10 + rem）
4、deviceWidth 大于540时， 使用pc版

关于设计与切图：
第一步，视觉设计阶段，设计师按宽度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)的界面效果。由此完成大中小三屏适配。

注意第三步，就要使用我们以上介绍的网易跟淘宝的适配方法了。假如公司设计稿不是基于750的怎么办，其实很简单，按上图做一些相应替换即可，但是流程和方法还是一样的。解释一下为什么要在@3x的图里切，这是因为现在市面上也有不少像魅蓝note这种超高清屏幕，devicePixelRatio已经达到3了，这个切图保证在所有设备都清晰显示

前端文章收纳盒: i玩林( iwan0.com )