简单的几步~~~

 这里讲二种方式：1.借助插件实现，2.利用css3媒体查询实现

方法一：下载两个插件

1.安装 lib-flexible 和 px2rem-loader 两个插件

npm i lib-flexible -S  //生成

npm i px2rem-loader -D //开发

2.在项目的入口文件 main.js 里引入 lib-flexible

// main.js
import 'lib-flexible'

      

 3.找到文件 node_modules/@vue/cli-service/lib/config/css.js，添加规则

4.找到flexible.js文件进行修改

function refreshRem(){
      var width = docEl.getBoundingClientRect().width;
      if (width / dpr > 540) {
          width = width * dpr;
      }
      var rem = width / 10;
      docEl.style.fontSize = rem + 'px';
      flexible.rem = win.rem = rem;
  }

方法二：利用css3媒体查询

/* 方法一 */
@media screen and (min-width: 1024px) {
  html {
    font-size: 10px;
  }
}
@media screen and (min-width: 1100px) {
  html {
    font-size: 12px;
  }
}
/* @media (min-width: 1280px) { html{font-size: 22px;} } */
@media screen and (min-width: 1280px) {
  html {
    font-size: 12px;
  }
}
@media screen and (min-width: 1366px) {
  html {
    font-size: 13px;
  }
}
@media screen and (min-width: 1440px) {
  html {
    font-size: 14px;
  }
}
@media screen and (min-width: 1680px) {
  html {
    font-size: 16px;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 20px;
  }
}
@media screen and (min-width: 2048px) {
  html {
    font-size: 20px;
  }
}
@media screen and (min-width: 2560px) {
  html {
    font-size: 26px;
  }
}
@media screen and (min-width: 4096px) {
  html {
    font-size: 40px;
  }
}

 

/* 方法二 */
/*屏幕大于1200排序（大屏幕电脑）*/
 @media screen and (min-width: 1200px){html{font-size: 19px;}} 
/*屏幕在1024px到1199之间（中屏幕电脑）*/
 @media screen and (min-width: 1024px) and (max-width: 1199px){html{font-size: 19px;}} 
/*屏幕在768px到1023之间（小屏幕-pad）*/
 @media screen and (min-width: 768px) and (max-width:1023px){html{font-size: 14px;}}  
/*屏幕在480px到768之间（主要是手机屏幕）*/
@media screen and (max-width: 768px){}   

ie8兼容

<script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>