vue工程实现px转rem
使用px单位在不同宽高比设备上显示样式比例有差异，rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。可以使用rem实现自适应。
postcss-px2rem：是可以将代码中px自动转化成对应的rem的一个插件.
先安装插件
npm i postcss-px2rem --save -dev
在postcss.config.js中添加配置
module.exports = {"plugins": {"postcss-import": {},"postcss-url": {},// to edit target browsers: use "browserslist" field in package.json"autoprefixer": {"browsers": ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 8']},// 1rem = 20px'postcss-px2rem':{'remUnit':20} //配置rem基准值，75是iphone6标准}}
然后再新建一个js文件 setRem.js 这个可以实现在分模块打包的情况下针对每一个模块 配置不同的remSize来实现不同的模块有不同的转换基数。
export default function setRemInit(baseWidth = 750) {// baseSize 是用来设置html font-size的大小 。function setRem(){const dpr = window.devicePixelRatio;//当前显示设备的物理像素分辨率与CSS像素分辨率之比。const currentWidth = document.documentElement.clientWidth;let remSize = 0;let scale = 0;let baseSize = 20; // 1rem = 20pxscale = currentWidth / baseWidth; // 当前页面宽度相对于 750 px(设计稿尺寸)的缩放比例，可根据自己需要修改。remSize = baseWidth / baseSize; remSize = remSize * scale; document.documentElement.style.fontSize = remSize + 'px'; // 设置页面根节点字体大小document.documentElement.setAttribute('data-dpr', `${dpr}`);}// 初始化setRem();// 改变窗口大小时重新设置 remwindow.addEventListener('resize', setRem);}
在对应模块index.js引用新增的js
import setRemInit from '@/plugins/setRem' ///remsetRemInit()
over
