適合PC端 rem適配布局
1、cnpm i amfe-flexible postcss-px2rem-exclude --save
2热监、創(chuàng)建postcss.config.js,添加一下代碼晤锹,exclude是防止將引入的框架的px轉(zhuǎn)成rem
module.exports = { plugins: { autoprefixer: {}, "postcss-px2rem-exclude": { "remUnit": 192, "exclude": /node_modules/i } } }
remUnit==》 指的是你設(shè)計(jì)稿的寬度的尺寸/10 例如我的設(shè)計(jì)稿為1920
3钻趋、在使用的頁面直接寫設(shè)計(jì)稿給的尺寸px就行了弹灭, 會(huì)自動(dòng)幫你轉(zhuǎn)換為rem
微信圖片_20211106103321.png
這時(shí)候我們可以看到瀏覽器顯示的尺寸為如下
微信圖片_20211106103516.png
ok 大功告成~~~~~