背景:需要做一个大屏数据展示,因为是后端,找的模板进行嵌套,但是在套进element后台的时候出现rem不适配的问题,进行解决
过程:找了很多个帖子,最后在一个源头贴上找到了答案,我想问那些直接抄都抄不好的大佬们,你们的良心不会痛吗,搬砖搬全好吗,emmmm
1.安装插件(这个插件是一个大佬自己改出来的,万分感谢,链接在下面)
npm i postcss-px2rem-exclude
- 新建utils/rem.js文件(搬砖过来的)
// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
- 引入js文件到main.js
import './utils/rem.js'
- 写入根目录文件 postcss.config.js 或 postcss.js,如果是第三方或者第四方模板,用 | 分割指定文件夹,我是卡在这一步上,一直没搞定,直到看到下面的链接
module.exports = {
'plugins': {
'postcss-px2rem-exclude': {
remUnit: 75,
exclude: /node_modules|folder_name/i
//例:exclude: /node_modules|styles|layout|components/i
}
}
}
网友评论