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

前言

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

导入

方案1. 直接阿里云CDN

在单页中加入

<script src="/mtb/lib-flexible/0.3.4/??flexible_css.js,"></script>

方案2. 下载到本地

github地址

/amfe/lib-flexible

将 加入项目中
然后在单页中加入

<script src="assets/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:///mobile/