vue cli3项目移动端适配

1. 安装依赖

   //cd 项目文件夹路径下,执行下面的命令
   npm install lib-flexible postcss-loader postcss-pxtorem --save
   //或者
   npm install lib-flexible postcss-loader postcss-pxtorem -S
   

   lib-flexible会自动为页面根据屏幕添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值

   postcss-pxtorem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据标签的font-size值来计算出结果，1rem=html标签的font-size值

   postcss-loader用来对.css 文件进行处理

2. 配置

   main.js中引入lib-flexible

   import "lib-flexible"
   

   配置vue.config.js

   const pxRem = require("postcss-pxtorem")
   module.exports = {
       css:{
           loaderOptions:{
               postcss: {
                   //selectorBlackList正则过滤，符合的class不进行rem转化
                   //单个的css语句需过滤的情况下，可以使用PX或Px单位
                   plugins:[pxRem({
                       autoprefixer:{},
                       rootValue: 37.5,
                       propList: ["*"],// 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部 默认全部处理
                       selectorBlackList:[".ig-",".dp-"]
                   })]
               }
           }
       }
   }
   

   项目中正常使用px进行样式书写即可

   执行npm run serve重启项目，查看适配效果