vue项目pc端使用flexible适配，字体显小问题

安装 npm i lib-flexible -S
安装 npm i px2rem-loader -D
在main.js引入 import ‘lib-flexible’
build/utils.js修改配置

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

 const px2remLoader = {
   loader: 'px2rem-loader',
   options: {
     remUnit: 192,  //根据视觉稿，rem为px的十分之一，1920px  192 rem
      // remPrecision: 8//换算的rem保留几位小数点
   }
 }


 //utils.js
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
       })
     })
   }
//...

找到lib-flexible安装包flexible.js文件，修改配置

function refreshRem(){
      var width = docEl.getBoundingClientRect().width;
      if (width / dpr > 540) {
          // width = 540* dpr;
          // 宽度不能写死，改成动态的
          width = width * dpr;
      }
      var rem = width / 100;
      docEl.style.fontSize = rem + 'px';
      flexible.rem = win.rem = rem;
  }

end.

如果对你有帮助，点个赞再走吧~谢谢
关注我，不定时分享技术干货~