使用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二維碼：(隨便寫的，未注意規范，字號未做適配)

 

效果如下：

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