最开始找了很多方案，比如scale缩放，通过计算设计图分辨率和浏览器的可显示区域进行缩放，实际使用下来有几个弊端:
- 页面上下或者左右会留白。不太适合整体地图当背景，而且要可操作的情况。
- 页面字体会显得很模糊，使用3d属性也没能解决。
- 页面整体使用scale 后，高德地图点位点击偏移。
很多组件好像都是基于这个scale来实现大屏的处理。不太符合项目要求。最后还是决定使用 postcss-pxtorem，整体效果还是达到预期。
rem.ts
// 设置 rem 函数
function setRem() {
// 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16
const screenWidth = 1920;
const scale = screenWidth / 16;
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
// 得到html的Dom元素
const htmlDom = document.getElementsByTagName("html")[0];
// 设置根元素字体大小
htmlDom.style.fontSize = htmlWidth / scale + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.addEventListener("resize", () => {//改为这样设置可以重新设置
setRem();
});
postcss.config.cjs
module.exports = {
plugins: {
// to edit target browsers: use "browserslist" field in package.json
autoprefixer: {},
"postcss-pxtorem": {
rootValue: 16, // 结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
propList: ["*"],
exclude: e => {
if (/src(\\|\/)views(\\|\/)largeScreen/.test(e)) {
return false;
} else {
return true;
}
} // 只对src/views/largeScreen文件进行px转rem，其他文件不转换
}
}
};
但是rem对element的自带行内样式 和echarts 的字体样式不能适配，需要单独处理。
export function echartFontSize(num: number) {
let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (!clientWidth) return;
// 此处的1920为设计稿的宽度，记得修改！
let fontSize = clientWidth / 1920;
return num * fontSize;
}
