PC端自适應（vue）&& 移動端+vant

npm i lib-flexible -S
npm i px2rem-loader -D
           

安裝完成以後在main.js引入

import 'lib-flexible'
           

在 vue-cli 生成的 webpack 配置中，vue-loader 的 options 和其他樣式檔案 loader 最終是都是由 build/utils.js 裡的一個方法生成的。我們隻需在 cssLoader 後再加上一個 px2remLoader 即可，px2rem-loader 的 remUnit 選項意思是 1rem=多少像素，結合 lib-flexible 的方案，我們将 px2remLoader 的 options.remUnit 設定成設計稿寬度的 1/10，這裡我們假設設計稿寬為 1920px。

//utils.js
const cssLoader = {
  loader: 'css-loader',
   options: {
     sourceMap: options.sourceMap
   }
 }

 const px2remLoader = {
   loader: 'px2rem-loader',
   options: {
     remUnit: 192
   }
 }
           

下面loader函數

function generateLoaders (loader, loaderOptions) {
   const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

   if (loader) {
     loaders.push({
       loader: loader + '-loader',
       options: Object.assign({}, loaderOptions, {
         sourceMap: options.sourceMap
       })
     })
   }
           

最後一步，修改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;
  }
           

将540dpr改為widthdpr

移動端使用Vant的話應将

` const px2remLoader = {
   loader: 'px2rem-loader',
   options: {
     remUnit: 37.5   //設定未37.5 才不會導緻縮小
   }
 }`