基于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:771534408@qq.com

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 180,340评论 25 708
  • 榜单排序依据: 1.项目开源 2.github上该项目的star个数 3.开发团队、作者的实力 1. Retrof...
    小宇宙_XYZ阅读 6,003评论 4 163
  • 烈日下,太阳灼烧着大地,似乎要把人烤焦一般,而同样,六六的心似乎也要被烤焦了。 六六看到了心中日思夜想的人。那个人...
    行思坐忆阅读 373评论 0 0
  • 归国志愿者报告 写在前面:一段异国志愿旅程就这样结束了,如果想要把这段记忆留住,最好的办法就是把它记录下来。不如跟...
    Jc_702c阅读 655评论 0 1
  • 泥岗路的天桥还是向以往一样拥挤 各色各样的行人穿梭在这座天桥 有的三五成群 有的成双成对 有的孤单落寞 有人嚷吵着...
    旧故里xzi阅读 217评论 2 4

友情链接更多精彩内容