VUE项目PC端实现自适应rem

VUE项目PC端实现自适应rem

　　　　由于项目设计搞是采用的1920*1080的尺寸；项目也基本快做完了，用的1920*1080的尺寸；现在要实现自适应；我这边选择的是rem自适应；当然你也可以用@media多媒体；也可以用写几个适应不同尺寸的css样式；按需引入；

　　　　这里我采用的是rem：

步骤：

一：安装 lib-flexible

?

1	$ npm install lib-flexible --save

二·、在main.js文件引入lib-flexible

?

1	import 'lib-flexible/flexible'

三、安装px2rem-loader

?

1	$ npm install px2rem-loader --save-dev

四、安装postcss-pxtorem

?

1	npm install postcss-pxtorem

五、在根目录新建一个文件夹 postcss.config.js；里面写入

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

const pxtorem = require("postcss-pxtorem"); module.exports = {   plugins: [     pxtorem({       rootValue: 192,//我这里配置的是我1366分辨率下的基准值，会在下面解释       unitPrecision: 5,       propList: ["*"],       selectorBlackList: [/^\.nop2r/, /^\.am/,'html'],       //排除antd样式，由于我给html设置了min-width，所以把html也排除在外不做rem转换       replace: true,       mediaQuery: false,       minPixelValue: 0     })   ] }

　六、更改这个文件夹下的flexible.js文件

七、在flexible.js文件中找到这个函数，把这个固定尺寸540，改成width

 

有疑问请加群讨论：910316886