扫一扫分享
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来替代此方案。
手机预览