lib-flexible 介绍
lib-flexible是 一个 制作H5适配的开源库.
使用 方法
在head 标签 中引入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>
另外强烈建议对js做内联处理,在所有资源加载之前执行这个js。执行这个js后,会在<html>元素上 增加 一个 data-dpr 属性 ,以及 一个 font-size样式。js会根据不同的设备 添加 不同的data-dpr值,比如说2或者3,同时会给html 加上 对应的font-size的值,比如说75px。
在项目中使用
当设计稿为750px时
less中的 用法 (75指的是开发时使用的设备为iPhone6时html 标签 的font-size基准值大小):
.function {
.p2r(@px) {
return: unit(@px/75,1rem);
}
}
less使用 自定义函数 需要 插件 支持 ,具体可以看https://github.com/seven-phases-max/less-plugin-functions
那么之后可以这么用:
.div {
width: p2r(100px);
height: p2r(100px);
}
由于viewport单位得到众多浏览器的兼容,lib-flexible这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有一定的问题。建议大家开始使用viewport来替代此方案。
网站地址 : https://github.com/amfe/lib-flexible
GitHub: https://github.com/amfe/lib-flexible
网站描述: 实现移动端H5 页面 适配
lib-flexible官方网站
官方网站: https://github.com/amfe/lib-flexible
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。