12.postcss-px-to-viewport（CSS单位转换）

简介：A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units.

GitHub地址

1. 安装(开发环境)

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

2. 导入（main.js）

   import VueLazyLoad from 'vue-lazyload'

3. 使用（创建postcss.config.js文件进行相关配置），注意创建完或改完最好重新启动下服务（否则可能没更新）

   相关配置可以到官网查看

   module.exports = {
     plugins: {
       autoprefixer: {
       },
       "postcss-px-to-viewport":{ 
         viewportWidth: 375, //视窗的宽度，对应的是我们设计稿的宽度
         viewportHeight: 667, //视窗的高度, 对应的是设计稿的高度
         unitPrecision: 5, //指定'px'转换为视窗单位值的小数位数
         viewportUnit: 'vw', //指定需要转换成的视窗单位
         //selectorBlackList: ['ignore','tab-bar','tab-bar-item'],//指定不需要转换的类,按正则方式来
         minPixelValue: 1, //小于或等于'1px'不转换为视窗单位
         mediaQuery: false, //允许在媒体查询中转换'px'
         //exclude: [/TabBar/] //[]内为JS正则表达式
       }
     }
   }