使用amfe-flexible和postcss-px2rem解决VUE移动/PC端适配

amfe-flexible

该插件将网页平均分成10等份，然后设置html根标签的font-size

html,body{
    color:#333;
    font-size: 14px!important;
    font-family: 'oppo';
}

postcss-px2rem

该插件将我们经常使用的px转换成rem
转换方法是rem = px /（我们设置的值）
例如我们设置的单位是37.5，设置div的宽度为75px，则换算后为2rem

1、安装

	npm i amfe-flexible postcss-px2rem

2、main.js

import rem from 'amfe-flexible'

Vue.use(rem)
function px2rem(px){
  if(/%/ig.test(px)){
    return px;
  }else{
    return (parseFloat(px) / 192) + 'rem';
  }
}
Vue.prototype.$px2rem = px2rem;

3、在package.json里添加

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem": {
        "remUnit": 192
      }
    }
  }

4、页面中使用

//行内样式写法
<img
    src="../../assets/img/notice_icon.png"
    alt=""
    :style="{width:$px2rem('50px')}"
/>

<template>
  <div class="about">
    <div class="box"></div>
  </div>
</template>
<script>
  export default {
    mounted() {
    }
  }
</script>
<style lang="scss">
//正常写法
.box {
  width: 375px;
  height: 375px;
  background: rgba(0, 0, 0, .5);
}
</style>