Flexible实现手淘H5页面的rem布局适配

前言

项目加上了缩放比例, 但是ionic本身很多组件都是px的 导致在github上的插件总是这样那样的问题弄得心很累, 一气之下。直接全部替换成了淘宝的H5方案，反正改的也不少

导入

方案1. 直接阿里云CDN

在单页index.html中加入

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

• 1

方案2. 下载到本地

github地址

https://github.com/amfe/lib-flexible

• 1

将index.min.js 加入项目中 
然后在单页index.html中加入

<script src="assets/js/index.min.js"></script>

• 1

最后都需要：同步函数

// 设计图宽度是750
$design-width: 750;

@function px2rem( $px )
{
  @return $px/$design-width*10 + rem; //对应js 
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7

以上函数,在其他地方使用,若页面是300px, 就可以直接写成 
height: px2rem(300);

总结

目前大多数前端UI框架基本都是flex加上px做的兼容方案, 引入rem 会将组件本身样式做一次大修改, 总之改的比较烦，建议谨慎选择。

原文地址为：

http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html