微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

lib-flexible

编程之家收集整理的这个编程导航主要介绍了lib-flexible编程之家,现在分享给大家,也给大家做个参考。

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。