移动端多终端适配方案——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页面的终端适配