iPhone5 下页面效果.png
iPhone 6 Plus 下页面效果.png
为了让朋友们更清晰感受此方案的巨大优势，下面是源码和Demo
实践应用源码(请在手机端或者手机模式下浏览效果更佳！)
示例源码
在线Demo
常见问题说明（2017/1/19）
许多同学对该方案存在不少误解导致使用出现各种问题，这里统一回复下。
1.问：为毛效果图是要640或者750的，我非得弄个666的不行咩？
答：老实说当然可以，不过为了规范，640或者750是相对合适的。拿Iphone 5s 举例，它的css像素宽度是320px，由于它的dpr=2，所以它的物理像素宽度为320 × 2 = 640px，这也就是为什么，你在5s上截了一张图，在电脑上打开，它的原始宽度是640px的原因。那 iphone 6 的截图宽度呢？ 375 × 2 = 750那 iphone 6 sp 的截图宽度呢？ 414 × 3 = 1242以此类推，你现在能明白效果图为什么一般是 640 ，750 甚至是 1242 的原因了么？（真没有歧视安卓机的意思。。。）
2.问：宽度用rem写的情况下， 在 iphone6 上没问题， 在 iphone5上会有横向滚动条，何解？
答：假设你的效果图宽度是750，在这个效果图上可能有一个宽度为7rem（高清方案默认 1rem = 100px）的元素。我们知道，高清方案的特点就是几乎完美还原效果图，也就是说，你写了一个宽度为 7rem 的元素，那么在目前主流移动设备上都是7rem。然而，iphone 5 的宽度为640，也就是6.4rem。于是横向滚动条不可避免的出现了。怎么办呢？ 这是我目前推荐的比较安全的方式：如果元素的宽度超过效果图宽度的一半（效果图宽为640或750），果断使用百分比宽度，或者flex布局。就像把等屏宽的图片宽度设为100%一样。
3.问：不是 1rem = 100px吗，为什么我的代码写了一个宽度为3rem的元素，在电脑端的谷歌浏览器上宽度只有150px?
答：先说高清方案代码，再次强调咱们的高清方案代码是根据设备的dpr动态设置html 的 font-size，如果dpr=1(如电脑端），则html的font-size为50px，也就是 1rem = 50px如果dpr=2(如iphone 5 和 6），则html的font-size为100px，也就是 1rem = 100px如果dpr=3(如iphone 6 sp），则html的font-size为150px，也就是 1rem = 150px如果dpr为其他值，即便不是整数，如3.4 , 也是一样直接将dpr 乘以 50 。
再来说说效果图，一般来讲，我们的效果图宽度要么是640，要么是750，无论哪一个，它们对应设备的dpr=2，此时，1 rem = 50 × 2 = 100px。这也就是为什么高清方案默认1rem = 100px。而将1rem默认100px也是好处多多，可以帮你快速换算单位，比如在750宽度下的效果图，某元素宽度为53px，那么css宽度直接设为53/100=0.53rem了。
然而极少情况下，有设计师将效果图宽定为1242px，因为他手里只有一个iphone 6 sp (dpr = 3)，设计完效果图刚好可以在他的iphone 6 sp里查看调整。一切完毕之后，他将这个效果图交给你来切图。由于这个效果图对应设备的dpr=3,也就是1rem = 50 × 3 = 150px。所以如果你量取了一个宽度为90px的元素，它的css宽度应该为 90/150=0.6rem。因为咱们的高清方案默认1rem=100px。所以为了还原效果图，你需要这样换算。当然，一个技巧就是你可以直接修改咱们的高清方案的默认设置。在代码的最后 你会看到 flex(100, 1) ，将其修改成flex(150, 1)就不用那么麻烦的换算了，此时那个90px的直接写成0.9rem就可以了。
4.问：高清方案在微信上，有时候字体会不受控制变的很大，怎么办？
答：点我，这是我对该问题的总结
5.问：我在底部导航用的flex感觉更合适一些，请问这样子混着用可以吗？
答：咱们的rem适合写固定尺寸。其余的根据需要换成flex或者百分比。源码示例中就有这三种的综合运用。
网友评论