最开始找了很多方案，比如scale缩放，通过计算设计图分辨率和浏览器的可显示区域进行缩放，实际使用下来有几个弊端:
- 页面上下或者左右会留白。不太适合整体地图当背景，而且要可操作的情况。
- 页面字体会显得很模糊，使用3d属性也没能解决。
- 页面整体使用scale 后，高德地图点位点击偏移。
很多组件好像都是基于这个scale来实现大屏的处理。不太符合项目要求。最后还是决定使用 postcss-pxtorem，整体效果还是达到预期。
安装
npm
npm install postcss-pxtorem --save
npm install amfe-flexible --save
npm install autoprefixer --save
yarn
yarn add -D postcss-pxtorem
yarn add -D amfe-flexible
yarn add -D autoprefixer
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，其他文件不转换
}
}
};
有的使用这个方式不生效，可以直接在vite.config.js中配置
plugins: [
autoprefixer({}),
postCssPxToRem({
// 自适应，px>rem转换
rootValue: 75, // 75表示750设计稿，37.5表示375设计稿
propList: ["*"], // 需要转换的属性，这里选择全部都进行转换 也可以'font', 'font-size', 'line-height', 'letter-spacing'等
selectorBlackList: [".van"], // 过滤掉van-开头的class，不进行rem转换
exclude: "/node_modules", // 忽略包文件转换rem
}),
],
————————————————
版权声明：本文为CSDN博主「自律的蜗牛」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ben_grf/article/details/120890127
但是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;
}
