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

最新文章

  1. speex进行音频去噪
  2. dijkstra 最短路算法
  3. HttpHelper类
  4. ubuntu下取代ping的好工具tcpping
  5. Javascript配合jQuery实现流畅的前端验证
  6. HDU 4948
  7. [课程相关]homework-01
  8. 关闭ES动态创建type
  9. jsp+servlet 上传图片实例
  10. 【Itext】7步制作Itext5页眉页脚pdf实现第几页共几页
  11. 第三方库API接口
  12. [Swift]LeetCode883. 三维形体投影面积 | Projection Area of 3D Shapes
  13. 3.git 分支操作
  14. UML第一次作业
  15. Python 豆瓣源
  16. C# byte和10进制、16进制相互转换
  17. SpringBoot 中使用redis以及redisTemplate
  18. nginx检查报错 error while loading shared libraries: libprofiler.so.0: cannot open shared object file: No such file or directory
  19. mysql数据库引擎InnoDB和MyISAM
  20. vue插件集合

热门文章

  1. 【AngularJs】---JSONP跨域访问数据传输(JSON_CALLBACK)
  2. vim 编辑器常规操作
  3. Springboot简介01
  4. csharp: datatable get Column datatype or Column Name
  5. 判断当前浏览器是否支持HTML5的日期控件
  6. UOJ#347. 【WC2018】通道(边分治)
  7. Android之NDK环境配置+JNI开发+so文件编译
  8. Html5 填表 表单(二) input type 各种输入, 各种用户选择,上传等等泛输入用户交互
  9. laravel开发之-网站初建
  10. Java web中的web-xml中标签定义之jsp-config