前端大屏相关自适应

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

1、下载 lib-flexible，postcss-pxtorem

npm i postcss-pxtorem@5.1.1 --save

npm i lib-flexible

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

 

2、lib-flexible配置

2.1首先在main.js中引入

import 'lib-flexible/flexible'

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

 

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

 

 

 3、postcss-pxtorem配置

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

 

 代码如下

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

　　

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