前段时间看了大神的博客文章【使用Flexible实现手淘H5页面的终端适配】(地址：http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html），受益良多，写了个小demo，记录一下以防忘记，需要注意几点，如下：
1. 将flexible_css.js,flexible.js文件加载到项目中
<script src="build/flexible_css.debug.js"></script> <script src="build/flexible.debug.js"></script>
或加载阿里CDN的文件：
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
2. 布局
i. 基本布局：rem
将视觉稿中的px单位转换成rem单位 ：
html元素尺寸 = 视觉稿px值 / rem基准值
例如：视觉稿宽度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;
}
兼容UC浏览器：
uc浏览器判断到页面上文字居多时，会自动放大字体优化移动用户体验。
添加以下头部可以禁用掉该优化
<meta name="wap-font-scale" content="no">
demo二维码：(随便写的，未注意规范，字号未做适配)
效果如下：
以上，个人理解，总结出的可能存在错误，欢迎指出，不甚感激！