移動端多終端適配方案——lib-flexible

時間 2019-12-01

標籤移動終端適配方案 lib flexible 欄目無線简体版

原文原文鏈接

lib-flexible是什麼？

lib-flexible是一個製做H5適配的開源庫，能夠點擊這裏下載相關文件，獲取須要的JavaScript和CSS文件。css

使用方法html

在head標籤中引入js文件html5

<script src="build/flexible_css.debug.js"></script>
<script src="build/flexible.debug.js"></script>

也能夠使用阿里的CDN：git

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

另外強烈建議對JS作內聯處理，在全部資源加載以前執行這個JS。執行這個JS後，會在<html>元素上增長一個data-dpr屬性，以及一個font-size樣式。JS會根據不一樣的設備添加不一樣的data-dpr值，好比說2或者3，同時會給html加上對應的font-size的值，好比說75px。github

在項目中使用

當設計稿爲750px時less

less中的用法（75指的是開發時使用的設備爲iPhone6時html標籤的font-size基準值大小）：函數

.function {
  .p2r(@px) {
    return: unit(@px/75, 1rem);
  }
}

less使用自定義函數須要插件支持，具體能夠看https://github.com/seven-phases-max/less-plugin-functionsflex

那麼以後能夠這麼用：ui

.div {
    width: p2r(100px);
    height: p2r(100px);      
}

好比在iPhone6下時，html標籤會被添加data-dpr屬性，和基準值font-sizespa

div的width和height就爲100/75rem=1.33333333rem

在iPhone6 Plus下時，data-dpr爲3

此時div的rem仍是爲1.3333333rem，可是因爲html標籤的font-size基準值變成了124.2，因此div的width和height就不是100px了

這樣當設備的dpr和分辨率不一樣時，元素會相應的改變大小，這樣就達到了對於不一樣設備的適配的效果。

參考：使用Flexible實現手淘H5頁面的終端適配

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。