基于ionic3框架开发之px转REM布局实现过程

前言

  由于以前的srm移动应用项目采用ionic1.x版本进行开发的，由于性能不足诟病，导致想要对srm移动框架进行升级操作，但是旧版本的srm移动应用采用的是rem布局，ionic3.x版本基本上很难想前兼容，看了一下ionic3框架发现ionic3框架里面有px，rem，及em为单位进行布局。思来想去，还是对ionic3框架统一转换成rem布局。

需求

对ionic3框架的所有组件里面涉及到rem未单位的统一转换成px然后在根据自己定义的rem换算比进行rem布局废话不多开始撸代码

实现过程：

第一步找到找到项目下的src文件下的index.html页面添加如下代码：

第二步找到找到项目下的src文件下的them/variables.scss：定义一个sass函数（其中46.875是基于iphone6下的设备尺寸进行换算得出的结果）

第二步找到找到项目下node_modules/ionic-angular\components下的每一个组件下的scss文件，找到含有rem为单位的调用remTo（）函数进行转换即可，一下是我对modal组件及toolbar组件里面的scss文件中包含的rem转换成px后的的效果图

总结：

目前采用该方法是一个比较笨的方法，但是采用rem布局没有发现问题。如果有更好的方式，欢迎告知，我不胜感谢。联系QQ:[email protected]