淘宝官方h5移动适配解决方案——Flexible.js

原创 dingxiangming82 随笔 前端踩坑 536阅读 2018-04-04 09:33:45 举报

我承认是刚才了解到淘宝官方h5移动适配解决方案——Flexible.js 的,在此之前,一直是用 rem+px混用,加上css3多媒体查询来做自适应的,效果也很好。当然,我们切图网也有我们自己的移动适配解决方案,这个暂且不提,现在我们聊聊 Flexible.js 。

flexible.js 的用法非常的简单,在页面的<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>;

下面我将以750px的设计稿为例,分析如何制作一个适配多终端的页面

通过ps获得顶部的高度,在750设计稿上96px,所以我们要用96/(750/10),得到对应的rem值。

这样就实现了最终想要的结果,是不是很简单。

事实上 flexible.js 做了下面三件事:

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

评论 ( 6 )
最新评论
728045048 2018-04-25 16:30:31 6F

空岛资源网,你懂得!链接标题

lawrence 3F 2018-04-23 09:41:31 5F

现在还有h5版本么?

dingxiangming82 1F 2018-04-19 16:12:02 4F

网站在备案 ^_^

dingxiangming82 2F 2018-04-19 16:11:44 3F

现在不知道了, 我说的是手机h5版本,不是原始app

lawrence 2018-04-14 07:32:47 2F

淘宝app现在是用webview来展示页面的?

lawrence 2018-04-14 07:28:46 1F