vue 实现响应式布局，移动pc端通用amfe-flexible和postcss-pxtorem结合使用

1.amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。

2.postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。

3.安装amfe-flexible和postcss-pxtorem：

npm install amfe-flexible -S

npm install postcss-pxtorem -S

1.  
   npm install amfe-flexible -S
2.  
   npm install postcss-pxtorem -S

在main.js引入amfe-flexible

import 'amfe-flexible';

在vue.config.js添加配置postcss-pxtorem；（注意：可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可）

1.  
   module.exports = {
2.  
   css:{
3.  
   loaderOptions:{
4.  
   postcss:{
5.  
   plugins:{
6.  
   require('postcss-pxtorem')({
7.  
   rootValue:192, // ui设计图/10，可以根据项目的UI图定义
8.  
   propList:['*']
9.  
   })
10.  
    }
11.  
    }
12.  
    }
13.  
    }
14.  
    }

对于需要特殊元素需要设置的字体自适应，如echarts字体，可以在utils封装一个字体自适应的方法

1.  
   export function setAutoFontSize(font){
2.  
   let clientWidth = window.innerWidth || document.documentElement.clientWidth ||
3.  
   document.body.clientWidth;
4.  
   if(clientWidth){
5.  
   let fontRate = clientWidth/1920 // clientWidth/设计图宽度
6.  
   return font*fontRate;
7.  
   }
8.  
   }

这篇好文章是转载于：学新通技术网