前言

? 由于以前的srm移動應用項目采用ionic1.x版本進行開發(fā)的，由于性能不足詬病，導致想要對srm移動框架進行升級操作，但是舊版本的srm移動應用采用的是rem布局，ionic3.x版本基本上很難想前兼容，看了一下ionic3框架發(fā)現(xiàn)ionic3框架里面有px，rem，及em為單位進行布局。思來想去，還是對ionic3框架統(tǒng)一轉換成rem布局。

需求

對ionic3框架的所有組件里面涉及到rem未單位的統(tǒng)一轉換成px然后在根據(jù)自己定義的rem換算比進行rem布局廢話不多開始擼代碼

實現(xiàn)過程：

第一步找到找到項目下的src文件下的index.html頁面添加如下代碼：

第二步找到找到項目下的src文件下的them/variables.scss：定義一個sass函數(shù)（其中46.875是基于iphone6下的設備尺寸進行換算得出的結果）

第二步找到找到項目下node_modules/ionic-angular\components下的每一個組件下的scss文件，找到含有rem為單位的調用remTo（）函數(shù)進行轉換即可，一下是我對modal組件及toolbar組件里面的scss文件中包含的rem轉換成px后的的效果圖

總結：

目前采用該方法是一個比較笨的方法，但是采用rem布局沒有發(fā)現(xiàn)問題。如果有更好的方式，歡迎告知，我不勝感謝。聯(lián)系QQ:771534408@qq.com