使用Flexible實現H5頁面的終端適配

使用方法

建議對於js作內聯處理，在全部資源加載以前執行這個js。

執行這個js後，會在html（也就是document.documentElement）上增長一個data-dpr屬性，以及font-size樣式。

以後頁面中的元素，均可以用rem單位來設置。html上的font-size就是rem的基準像素。

把視覺稿中的px轉換成rem

首先，目前視覺稿大小分爲640，750以及，1125這三種。

當前方案會把這3類視覺稿分紅100份來看待（爲了之後兼容vh，vw單位）。每一份被稱爲一個單位a。同時，1rem單位認定爲10a。拿750的視覺稿舉例：

1a = 7.5px
1rem = 75px

所以，對於視覺稿上的元素的尺寸換算，只須要原始px值除以rem基準px值便可。例如240px * 120px的元素，最後轉換爲3.2rem * 1.6rem。

字體不使用rem的方法

字體的大小不推薦用rem做爲單位。因此對於字體的設置，仍舊使用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;
}

手動配置dpr

引入執行js以前，能夠經過輸出meta標籤方式來手動設置dpr。語法以下：

<meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />

其中initial-dpr會把dpr強制設置爲給定的值，maximum-dpr會比較系統的dpr和給定的dpr，取最小值。注意：這兩個參數只能選其一。

手動設置rem基準值的方法

輸出以下css樣式便可：

html {font-size: 60px!important;}

一些經常使用APIs

[Number] lib.flexible.dpr

當前頁面的dpr值

[Number] lib.flexible.rem

當前頁面的rem基準值

[Number|String] lib.flexible.rem2px([Number|String digital])

把rem轉換爲px

[Number|String] lib.flexible.px2rem([Number|String digital])

把px轉換爲rem

lib.flexible.refreshRem()

刷新當前頁面的rem基準值

柵格系統

需引入makegrid.js

<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/makegrid.js"></script>

使用方法

lib.flexible.makeGrid(params)

• [Object params]
  • designWidth - 設計稿寬度
  • designUnit - 設計稿最小單位a（以px爲單位）
  • columnCount - 柵格列數
  • columnXUnit - 柵格列寬（以a爲單位）
  • gutterXUnit - 柵格間距（以a爲單位）
  • edgeXUnit - 頁面左右邊距（以a爲單位）
  • className - 柵格樣式的名稱（可省略，默認爲grid）

經過傳入視覺的柵格規範定義，能夠輸出對應的css樣式。

lib.flexible.makeGridMode(modeName)

• [String modeName]

方案還預置了幾個默認的柵格規範，分別是750-12，750-6，640-12，640-6。

利用meta輸出柵格樣式

<meta content="designWidth=750, desginUnit=6, columnCount=12, columnXUnit=7, gutterXUnit=3, edgeXUnit=4" name="grid" />

或

<meta content="modeName=750-12" name="grid" />

柵格代碼舉例

<div class="grid">
    <div class="col-4"></div>
    <div class="col-4"></div>
    <div class="col-4"></div>
</div>

<div class="grid">
    <div class="col-6"></div>
    <div class="col-6"></div>
</div>

<div class="grid">
    <div class="col-3"></div>
    <div class="col-4"></div>
    <div class="col-5"></div>
</div>