使用Flexible适配移动端html页面 - demo记录

前段时间看了大神的博客文章【使用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二维码：(随便写的，未注意规范，字号未作适配)

 

效果以下：

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