使用Flexible适配移动端html页面

前段时间看了大神的博客文章【使用Flexible实现手淘H5页面的终端适配】(地址：http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html），受益良多，写了个小demo，记录一下以防忘记，需要注意几点，如下：

1. meta　

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

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

<script src='/images/loading.gif' data-original="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 = 75rem，然后以这个为基准，如果视觉稿中某块小内容宽度是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二维码：(字号未做适配)

效果如下：

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

原标题：使用Flexible适配移动端html页面

关键词：HTML