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 = 20px
scale = currentWidth / baseWidth; // 当前页面宽度相对于 750 px(设计稿尺寸)的缩放比例,可根据自己需要修改。
remSize = baseWidth / baseSize;
remSize = remSize * scale;
document.documentElement.style.fontSize = remSize + 'px'; // 设置页面根节点字体大小
document.documentElement.setAttribute('data-dpr', `${dpr}`);
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.addEventListener('resize', setRem);
}
在对应模块index.js引用新增的js
import setRemInit from '@/plugins/setRem' ///rem
setRemInit()
over