移動端（可伸縮佈局方案）

移動端（可伸縮佈局方案）

本文來源：http://www.cnblogs.com/lyzg/p/4877277.html?utm_source=caibaojian.com

一： 簡單暴力

• 關鍵元素高寬和位置都不變，只有容器元素在作伸縮變換。
• 文字流式
• 控件自適應（flex）
• 圖片等比縮放

二：網易的作法

若是設計稿的寬度爲640px

將設計稿分爲100份
var a = 640 / 100 = 6.4;

根據js計算html中的font-size的大小

deviceWidth = 320，font-size = 320 / 6.4 = 50px
deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500，font-size = 500 / 6.4 = 78.125px

deviceWidth經過document.documentElement.clientWidth

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

當deviceWidth大於設計稿的橫向分辨率時，始終遵循設計稿

三：淘寶的作法

github地址：https://github.com/amfe/lib-flexible/

依賴庫

無

完整引用舉例：

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

使用方法

建議對於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>