移动端一般适配会使用rem/vw

• 通常来说使用rem兼容性会更好，目前移动端应该大都是用rem来做自适应布局

1. 安裝插件

   npm install lib-flexible --save
   npm install postcss-px2rem --save
   

2. 在main.js中引入lib-flexible

   import 'lib-flexible'
   

3. 配置vue.config.js

   注：由于Vue Cli3开始的版本省去了可见的配置项,需要自己在根目录(也就是package.json同级目录)下新建vue.config.js文件

   module.exports = {
       css: {
           loaderOptions: {
             css: {},
             postcss: {
               plugins: [
                 require('postcss-px2rem')({
                   remUnit: 75 //设计图给的750的图就写75，也就是1rem=75px
                 })
               ]
             }
           }
       },
   }
   

4. npm run serve/npm run dev运行项目

自动适配PC和移动端

1. 配置vue.config.js

   module.exports = {
       css: {
           loaderOptions: {
             css: {},
             postcss: {
               plugins: [
                 require('postcss-px2rem')({
                   remUnit: 192 //设计图给的1920的图就写192，也就是1rem=192px
                 })
               ]
             }
           }
       },
   }
   

2. 在node_modules中找到lib-flexible/flexible.js文件

   • 找到refreshRem函数替换为以下代码

     function refreshRem(){
         var width = docEl.getBoundingClientRect().width;
         var rem = undefined
     
         if (width / dpr > 540) {
             width = width * dpr;
         }
     
         console.log(width,dpr)
     
         let flag = win.navigator.userAgent.match(
             /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
         );
     
         if(flag === null) {
             console.log("pc端");
             rem = width / 10;
         }else {
             console.log("移动端");
             rem = (width / 10)*2.56;// 移动端的2.56 是用  192 / 75 = 2.56  然后移动端的尺寸就可以1:1 进行适配
         }
         docEl.style.fontSize = rem + 'px';
         flexible.rem = win.rem = rem;
     }
     

踩坑

1. 运行报错：Error:To install them, you can run: npm install --save core-js/modules/es.arra…

   • 解决：安裝core-js即可

     npm install core-js@3 --save
     

2. 运行时，ESlint代码检测报错

   • 解决：在vue.config.js中关闭检测

     module.exports = {
         lintOnSave: false
     }