您的位置：首页 > 移动开发

移动端不同分辨率适配--使用flexible

2017-12-20 14:13 369 查看
根据阿里手淘团队发布的可伸缩布局方案amfe-flexible，git地址：https://github.com/amfe/lib-flexible。

使用方法：

lib-flexible
库的使用方法非常的简单，只需要在Web页面的
<head></head>
中添加对应的
flexible_css.js,flexible.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>


容器或组件宽高主要使用单位 
rem
，字体大小则不变仍然使用单位 
px
。

示例地址：https://github.com/amfe/article/issues/17

还有一个约束是，如果针对iphone5 640*1136，因此我们限制最外层包裹的div最大宽度为 640px，表示10rem;

把视觉稿中的
px
转换成
rem的
换算方法：要转换的像素值 / 640px * 10
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航