（移动端适配）如何在vue项目中使用rem 和vw适配移动端

rem适配

一、项目中安装lib-flexible
在main.js中引入lib-flexible
npm install lib-flexible --save-dev
lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font- size为屏幕 宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该 等 于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem
第二部分：安装px2rem-loader插件 自动将css中的px转换成rem
$ npm install px2rem-loader --save-dev
三部分、配置px2rem-loader
在根目录中间隔文件postcss.config.js配置以下

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      "rootValue": 37.5, // 设计稿宽度的1/10,（JSON文件中不加注释，此行注释及下行注释均删除）
      "propList":["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
   }
  }
}

vw适配

安装插件：

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

安装成功之后，在项目根目录下的package.json文件中，可以看到新安装的依赖包

接下来在根目录创建 .postcssrc.js 或者或 postcss.config.js 文件对新安装的PostCSS插件进行配置：

module.exports = {
  "plugins": {
    "postcss-px-to-viewport": {
      viewportWidth: 750,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: "vw",   //指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false     // 允许在媒体查询中转换`px`
    },
  }
}

由于配置文件修改了，所以重新跑一下 npm run dev，然后项目就可以看到了。

简单介绍插件的作用：

postcss-px-to-viewport：要用来把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插件之一。在配置中需要配置相关的几个关键参数：

"postcss-px-to-viewport": {
  viewportWidth: 750,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750 （如果我们设置的宽度是300px，那么编译之后的宽度为(300/750*100)=40vw,如果频宽实际为375px，那么该元素的宽度为（375*0.4）= 150px）
  viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
  unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
  viewportUnit: "vw",   // 指定需要转换成的视窗单位，建议使用vw
  selectorBlackList: ['.ignore', '.hairlines'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
  minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
  mediaQuery: false     // 允许在媒体查询中转换`px`
},