码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2017-12-20 14:52:48      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:one   style   换算   --   post   http   div   不同   相对路径   

根据阿里手淘团队发布的可伸缩布局方案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

 

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

标签:one   style   换算   --   post   http   div   不同   相对路径   

原文地址:http://www.cnblogs.com/xuepei/p/8073470.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!