1. meta　

2.将flexible_css.js,flexible.js文件加载到项目中

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

3.布局

i. 基本布局：rem

将视觉稿中的px单位转换成rem单位 ：

1）html元素尺寸 =  视觉稿px值 / rem基准值

2）rem基准值  =  视觉稿宽度px / 10

例如：视觉稿宽度750px，则html中的缩放倍率就是750 / 10 = 75，然后以这个为基准，如果视觉稿中某块小内容宽度是150px，则html中这块内容宽度就是 150 / 75 = 2rem

ii. 字号:px

字号用px单位，并根据情况用[data-dpr]属性来区分不同dpr下的文本字号大小。

div { width: 1rem; height: 0.4rem; font-size: 12px; // 默认写上dpr为1的fontSize } [data-dpr="2"] div { font-size: 24px; } [data-dpr="3"] div { font-size: 36px; }

demo二维码：(随便写的，未注意规范，字号未做适配)

效果如下：

以上，个人理解，总结出的可能存在错误，欢迎指出，不甚感激！