移动端屏幕适配_postcss-px-to-viewport（vant)

flexible+postcss_pstorem适配

lib-flexible+postcss-pxtorem，在相当长一段时间里，这两个插件搭配都是解决移动端布局的神器，lib-flexible是阿里手淘系开源的一个库，用于设置font-size，同时处理一些窗口缩放的问题。

lib-flexible+postcss-pxtorem是解决移动端布局的主流，但是它是否有什么不足？

1. 两个插件需要配套使用，而且rootValue设置的值不好理解

2. rem是相对于html元素字体单位的一个相对单位，从本质上来说，它属于一个字体单位，用字体单位来布局，并不是太合适

翻阅其github地址，可以看到这样一段话：

viewport适配

第二种方案是viewport，postcss-px-to-viewport 插件，它解决了以上提到的痛点，也满足以上提到的理想要求。它将px转换成视口单位vw，vw本质上还是一种百分比单位，100vw即等于100%，即window.innerWidth

1.下载插件postcss-px-to-viewport

npm install postcss-px-to-viewport --save-dev

或者使用yarn下载

yarn add -D postcss-px-to-viewport

或者新建vue并yarn下载

 vue create demo

 cd demo && yarn add postcss-px-to-viewport -D

2.在项目根目录下添加.postcssrc.js文件 此文件中添加配置

module.exports = {
  plugins: {
    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 要转化的单位
      viewportWidth: 750, // UI设计稿的宽度
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      landscape: false // 是否处理横屏情况
    }
  }
};

module.exports = {
  plugins: {
    "postcss-px-to-viewport": {
      // "exclude": /(/|\)(node_modules)(/|\)/
      unitToConvert: "px",
      viewportWidth: 750,
      unitPrecision: 5,
      propList: ["*"],
      viewportUnit: "vw",
      fontViewportUnit: "vw",
      selectorBlackList: ["px-"],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: undefined,
      include: undefined,
      landscape: false,
      landscapeUnit: "vw",
      landscapeWidth: 568,
    },
  },
};