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

前言

项目加上了缩放比例, 但是ionic本身很多组件都是px的 然后配合px2rem将ui库的px转化为rem

导入

方案1. 直接阿里云CDN

在单页index.html中加入

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

方案2. 下载到本地

github地址

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

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

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

最后都需要：同步函数

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

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

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

总结

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

原文地址为：

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