PostCSS-px2rem 是一个 PostCSS 插件，用于将px 单位转换为 rem 单位。它通过在 CSS 代码中查找所有的像素值（px），并将其转换为 rem 单位来实现这一目的。
使用方法：
-
安装postcss-pxtorem
npm i postcss-pxtorem@5.1.1 -D -
vue.config.js里面配置postcss-pxtorem
css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ rootValue : 16, // 浏览器默认值字体大小为16 selectorBlackList : [], propList : ['*'], }), ] } }, } -
创建rem.js文件
function setRem() { // 以1920分辨率为基准，将视口分为120份，每一份为16px，即1rem=16px const screenWidth = 1920 const scale = screenWidth / 16 const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth const htmlDom = document.getElementsByTagName('html')[0] // 设置根元素字体大小 htmlDom.style.fontSize = htmlWidth / scale + 'px' } // 初始化 setRem() // 改变窗口大小时重新设置 rem window.onresize = function() { setRem() } -
在main.js中引入rem.js
import '@/util/rem' 重启+执行
