1.安装amfe-flexible(根据屏幕动态改变根元素font-size,postcss-pxtorem把代码中px转为rem)
npm i amfe-flexible -S
2.安装postcss-pxtorem(一款 PostCSS 插件,用于将 px 单位转化为 rem 单位)
安装命令 npm i postcss-pxtorem -D
3.然后在main.js里引入amfe-flexible
import 'amfe-flexible'
如果安装后起服务爆错 Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
说明默认安装的版本号不对需要把版本好改为5.1.1
命令:npm i postcss-pxtorem@5.1.1
4.在根目录新建一个postcss.config.js(和src,package.json等文件平级)
5.在postcss.config.js引入代码
module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
'postcss-pxtorem': {
rootValue:75,
propList: ["*"]
},
},
};
重启服务就行啦