前端大屏相关自适应

前端页面需要适配大屏，满足不同分辨率，这一种方法是大屏内容可以跟着浏览器页面缩小而缩小

1、下载 lib-flexible，postcss-pxtorem

?

1 2 3

npm i postcss-pxtorem@5.1.1 --save   npm i lib-flexible

　　其中postcss-pxtorem推荐5版本，之前下载最新版6会有一些配置不同而导致报错

 

2、lib-flexible配置

2.1首先在main.js中引入

?

1	import 'lib-flexible/flexible'

2.2 然后找到node-modules中的lib-flexible下的flexible.js文件

 

　　找到下面这个方法，1920为设计稿的宽度，改成自己需要的数据即可

 

 

 3、postcss-pxtorem配置

项目使用vue-cli做的，vue2，所以在.postcssrc.js中配置

 

 代码如下

?

1 2 3 4 5 6 7 8

'postcss-pxtorem': {       rootValue: 192,  //结果为：设计稿元素尺寸/10，       propList: ['*'],       includes: [],       exclude: function (file) {         return file.indexOf('HelloWorld') === -1;       }//判断哪个文件需要px转换rem     }

　　

全部配置完，重启项目即可