postcss-pxtorem 移动端 vant ui 适配 px自动转换rem

VUE v2.5 项目中 移动端适配 px自动转换rem

安装amfe-flexible

npm i -S amfe-flexible

 

安装 postcss-pxtorem

npm i -D  postcss-pxtorem

 

在项目根目录创建或编辑.postcssrc.js文件

 注意： rootValue:75, //本项目设计图宽度是750px。其他项目需自己换算 【设计图宽度/10】

module.exports = {
  "plugins": {
    // 兼容浏览器，添加前缀
    "autoprefixer": {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions", // 所有主流浏览器最近10版本用
      ],
      grid: true,
    },
    "postcss-pxtorem": {
      rootValue:75,//本项目设计图宽度是750px。其他项目需自己换算 【设计图宽度/10】
      propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
      unitPrecision: 6, //保留rem小数点多少位
      selectorBlackList: ['.van'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
      replace: true,
      mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
      minPixelValue: 2, //px小于2的不会被转换
    },
    "postcss-import": {},
    "postcss-url": {},


  }
}

开始使用

根据设计图项目如实填写到页面内即可，测试字体40px

<template>
  <div id="app">
    测试字体大小

  </div>
</template>

<script>


export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 40px;
}
</style>

浏览器效果