postcss-px-to-viewport的适配使用

---

---

postcss-px-to-viewport介绍

在写移动端的时候，一直为了适配烦恼。通常解决办法都是使用百分比、弹性布局、媒体查询等方法。想偷懒，找个一劳永逸的方法来解决屏幕适配的问题。然后postcss-px-to-viewport就是一个很完美的插件，通过将px转化为vw、vh。主要适用于移动端官网

安装

• 先进行下载安装

npm install postcss-px-to-viewport --save-dev
yarn add -D postcss-px-to-viewport

配置参数

创建一个新的文件夹。名字以及位置如下所示

然后里面配置代码如下：

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-viewport": {
      viewportWidth: 750, //视窗的宽度,对应设计稿的宽度
      viewportHeigth: 667, //视窗的高度
      unitPrecision: 5, //指定'px'转换为视窗单位值的小数位数
      viewportUnit: "vw", //指定需要转换成的视窗单位,建议使用vm
      selectorBlackList: [], //指定不需要转换的类
      minPixelValue: 1,  //最小转换值
      mediaQuery: false,//允许在媒体查询中转换为‘px’,使用媒体查询，再对一些东西进行配置
      exclude: [/TabBar/]  //不需要转化的组件文件名正则，必须是正则表达式
    }
  }
};

配置完要重启一下项目，不然不一定生效。

然后在写项目的时候，就可以放心大胆的使用px等单位了。在页面上会自动变成vw和vh去适配不同的屏幕。