postcss-px2rem 安装以及使用
postcss-px2rem
·
- 安装 :
postcss-px2rem -d
postcss-pxtorem -d
px2rem-loader -d - 在src 中 创建 utils 文件夹 创建 rem.js
// 设置 rem 函数 比例为 1:100
function setRem() {
// PC端
console.log('非移动设备')
const baseSize = 100 // 基准值
// 相对于1920像素的缩放比
let scale = document.documentElement.clientWidth / 1920
// 根据屏幕变化 1rem 对应的 font-size
scale = scale > 1 ? 1 : scale;
const realFont = baseSize * scale
document.documentElement.style.fontSize = realFont + 'px'
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
};
- 新建 vue.config.js
const px2rem = require('postcss-px2rem')
const postcss = px2rem({
remUnit: 100 // 基准值
})
module.exports = {
publicPath: './',
css: {
loaderOptions: {
postcss: {
plugins: [
postcss
]
}
}
}
}
注意:
找到nodejs/llib-flexible/flexible.js 修改代码 如下:
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
// width = 540 * dpr;
width = width * dpr; // 这行代码 pc适配的话 540改为width
}
var rem = width * dpr;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
更多推荐
已为社区贡献2条内容
所有评论(0)