lib-flexible的使用方法

转载 (原文地址) 15036049068 随笔 适配 127阅读 2019-02-19 16:10:16 举报

lib-flexible是什么?

lib-flexible是一个制作H5适配的开源库,获取需要的JavaScript和CSS文件。

当然你可以直接使用阿里CDN:

将代码中的{{version}}换成对应的版本号0.3.4。

使用方法

lib-flexible库的使用方法非常的简单,只需要在Web页面的<head></head>中添加对应的flexible_css.js,flexible.js文件:

第一种方法是将文件下载到你的项目中,然后通过相对路径添加:

或者直接加载阿里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。

如此一来,页面中的元素,都可以通过rem单位来设置。他们会根据html元素的font-size值做相应的计算,从而实现屏幕的适配效果。

事实上他做了这几样事情:

1.动态改写<meta>标签
2.给<html>元素添加data-dpr属性,并且动态改写data-dpr的值
3.给<html>元素添加font-size属性,并且动态改写font-size的值

案例实战
了解Flexible相关的知识之后,咱们回到文章开头。我们的目标是制作一个适配各终端的H5页面。别的不多说,动手才能丰衣足食。

创建HTML模板

正如前面所介绍的一样,首先加载了Flexible所需的配置:

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>;
这个时候可以根据设计的图需求,在HTML文档的<body></body>中添加对应的HTML结构

评论 ( 1 )
最新评论
kkcode 2019-03-05 11:35:32 1F

引入其他含有css样式的插件会导致样式崩溃甚至不能用?

因为引入的插件,其css都只写一套,没有做dpr的适配,这样就会导致插件视图样式表现差强人意,甚至不能用