使用Flexible適配移動端html頁面 - demo記錄

前段時間看了大神的博客文章【使用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="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

3.佈局

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;
}

demo二維碼：(隨便寫的，未註意規範，字型大小未做適配)

效果如下：

以上，個人理解，總結出的可能存在錯誤，歡迎指出，不甚感激！