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

来源文章 ： 使用Flexible实现手淘H5页面的终端适配

来源 ：Airen的博客

来源地址 ： http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

--------------------------------------

前段时间看了大神的博客文章【使用Flexible实现手淘H5页面的终端适配】，受益良多，写了个小demo，记录一下以防忘记，需要注意几点，如下：

1. meta　

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

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 = 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页面 - demo记录

原文：http://www.cnblogs.com/banmengbanxing/p/5207480.html