rem布局适配

适合PC端 rem适配布局

1、cnpm i amfe-flexible postcss-px2rem-exclude --save
2、创建postcss.config.js,添加一下代码，exclude是防止将引入的框架的px转成rem

      module.exports = { plugins: { autoprefixer: {}, "postcss-px2rem-exclude": { "remUnit": 192, "exclude": /node_modules/i } } }
remUnit==》 指的是你设计稿的宽度的尺寸/10  例如我的设计稿为1920

3、在使用的页面直接写设计稿给的尺寸px就行了， 会自动帮你转换为rem

微信图片_20211106103321.png

这时候我们可以看到浏览器显示的尺寸为如下

微信图片_20211106103516.png

ok 大功告成~~~~~