vuecli4里面使用rem

1、安装两个插件

屏幕自适应插件

npm i amfe-flexible --save

把px转成rem的插件

只能在css文件里面写 里面的

npm i postcss-px2rem --save

2、main.js引入

import rem from 'amfe-flexible'

Vue.use(rem)

3、package.json中添加如下代码：

"remUnit":75表示 ui小姐姐给的图 是按照750px这个尺寸设计的

"postcss":{

"plugins":{

"autoprefixer":{},

"postcss-px2rem":{

"remUnit":75

}

}

}

4、修改了 src路径不需要重启，但是修改了配置项 需要重新启动 npm run serve

5、需要在css中设置样式，在行内样式style里面写无效

.s1{

/* 30px/75=0.4rem */

font-size:30px;

}

6、html的根元素 font-size会根据屏幕的变化而变化 但是元素rem值不会

效果：页面的尺寸也会根据屏幕的变化而变化