vue项目自适应，将px自动转为vw/vh

一、什么是自适应布局

自适应布局是指页面布局随着设备屏幕尺寸变化而自动调整。使得，在不同设备和分辨率上，展示出最佳布局。

二、将px转化为vw/vh

vw: viewport width vh: viewport height 在不同设备上，根据视口的大小不同，根据vw/vh调整元素大小。

Vue使用 postcss-px-to-viewport 插件，来自动将 px 转为 vw/vh。

三、使用插件 postcss-px-to-viewport

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

然后在根目录下创建 postcss.config.js 配置文件，具体配置如下：

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportWidth: 375,
      // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      // viewportHeight: 1334,
      // 指定`px`转换为视窗单位值的小数位数
      unitPrecision: 3,
      // 指定需要转换成的视窗单位，建议使用vw
      viewportUnit: 'vw',
      // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      selectorBlackList: ['.ignore', '.footer'],
      // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      minPixelValue: 1,
      // 允许在媒体查询中转换`px`
      mediaQuery: false,
      // 不转换的文件夹
      exclude: [/node_modules/],
      // include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换，比如test.vue，那么只会转换test.vue
      landscape: false, // 是否处理横屏情况
      landscapeUnit: 'vw', //横屏时使用的单位
      landscapeWidth: 568, //横屏时使用的视口宽度
    }
  }
};

// 通过设置viewport可以设置页面大小，通过meta标签可以设置viewport信息。

viewport有以下几个属性：

width：视口的宽度，正整数或设备宽度device-width（width=device-width） height：视口高度，正整数或device-height initial-scale（initial-scale=1.0）：网页初始缩放值，小数缩小，反之放大（initial-scale=1.0） maximum-scale（maximum-scale=1.0）：设置页面的最大缩放比例 minimum-scale（minimum-scale=1.0）： 设置页面的最小缩放比例 user-scaleble（user-scalable=no）：用户是否可以缩放 移动端默认会缩放大尺寸的页面的，当我们把上述代码去掉之后，就会随着移动端缩放的比例走，而且还可以自由放大。

// public/index.html

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover">

在打包时会自动将 px 转为 vw/vh 单位，生成的CSS文件中会包含 vw/vh实际单位。