其实H5适配的方案有很多种，网上有关于这方面的教程也非常的多。
不管哪种方法，都有其自己的优势和劣势。
为什么推荐使用Flexible库来做H5页面的终端设备适配呢？ 原理 简单易懂 源码疑问
主要因为这个库在手淘已经使用了近一年，而且已达到了较为稳定的状态。
除此之外，你不需要考虑如何对元素进行折算，可以根据对应的视觉稿，直接切入。
该方案 会 自动根据你的屏幕大小配置好 根节点的 font-size 大小
另外会改变 initial-scale , 如果是3倍retina屏, 值变成 1/3, viewPort被放大为3倍
书写的时候可以用 直接写 px, cssrem插件会帮你转成rem, 这样就不会影响开发效率
对应@3dpr 的图, 可以用 data-dpr 判断
[data-dpr="3"] & {
background-image: url("../img/@3x/android.png?v=@@version");
}对于字体:
@mixin font-dpr($font-size){
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}
过程
dpr问题https://github.com/amfe/article/issues/17
http://www.cnblogs.com/lyzg/p/5058356.html