postcss-pxtorem无法将内联样式的px转成rem

        在开发移动端项目，发现postcss-pxtorem无法将内联样式的px转成rem，这是一个非常致命的缺点。因为在开发项目时，经常会设置内联样式，那如何解决这个问题呢？

一、场景再现：

      我以vue2项目举例，目前使用Vant UI的rem布局适配作为参考。（如下）

 

         可见，需要下载两个插件，分别是 postcss-pxtorem 和 lib-flexible。怎么使用呢？

        1、在你的vue项目的根目录下，新建一个postcss.config.js文件

         2、在你的vue项目中找到src/main.js，添加：import "amfe-flexible"

         3、此时此刻，rem 布局适配，已经配置完成。现在来实现一下样式：

         效果如下，目前不是内联样式，单位被转成rem，毫无疑问，目前是自适应的状态。

二、发现问题

        如果是设置内联样式，就出现问题了

         单位没有被转成rem，目前文字大小不是自适应的状态

 三、解决方案：

        1、可以写一个px2rem方法

px2rem(px){
  if(/%/ig.test(px)){ // 有百分号%，特殊处理，表述pc是一个有百分号的数，比如：90%
    return px
  }else{
    return (parseFloat(px) / 37.5) + 'rem' // 这里的37.5，和rootValue值对应
  }
}

         2、使用如下

         可以发现，单位已经转成rem了，目前已经是自适应的状态

四、代码优化思想

        建议将px2rem方法，放在全局，在src/main.js里写如下代码

// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './routers'
import './permission.js'
import "amfe-flexible"

function px2rem(px){
  if(/%/ig.test(px)){ // 有百分号%，特殊处理，表述pc是一个有百分号的数，比如：90%
    return px
  }else{
    return (parseFloat(px) / 37.5) + 'rem'
  }
}
Vue.prototype.$px2rem = px2rem // 放到全局

Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

         使用方式

        希望本篇文章对你有帮助，如果您有更好的解决方案，欢迎留言评论！