移动端布局viewpost适配

（把px转换为rem）

ViewPost适配是指在不同屏幕尺寸和设备上适应性地显示内容的能力。在移动开发中，ViewPost适配是一种实现响应式布局和UI界面适配的技术手段，可以根据不同设备的屏幕尺寸显示相同的页面效果

1.创建项目  安装插件  yarn add postcss-px-to-viewport -D

2.在项目根目录下添加 .postcssrc.js 文件

3.添加如下配置：

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 // 是否处理横屏情况
    }
  }
};

4.运行项目  yarn serve

5.在  App.vue  中测试

<template>
  <div class="box">测试盒子</div>
</template>
 
<style lang="less" scoped>
.box {
  width: 750px;
  height: 200px;
  line-height: 200px;
  font-size: 50px;
  text-align: center;
  background: #51a45c;
}
</style>