直接用100vw和100vh必然变形，因二者独立计算不保比例；设计稿1920×1080与实际屏幕宽高比差异导致图表拉伸、文字模糊等；rem+JS动态设置font-size是最稳定方案。
为什么直接用 100vw 和 100vh 必然变形
因为浏览器把 100vw 当作视口宽度、100vh 当作视口高度，二者独立计算，不保证缩放比例一致。设计稿是 1920×1080（16:9），但真实屏幕可能是 2560×1600（16:10）或 5760×2160（21:9），只靠 width: 100vw; height: 100vh，图表会被横向拉宽或纵向压扁。
常见现象包括：echarts 坐标轴错位、文字模糊、border-radius 变成椭圆、div 内文字换行异常。
-
aspect-ratio单独写没反应？—— 它需要明确的宽度基准（如width: 100%），否则无法推算高度 -
transform: scale()看似简单，但鼠标点击热区偏移、fixed元素错位、打印/截图仍显示原始尺寸 -
zoom属非标准属性，Chrome 已逐步限制其在 iframe 或跨域场景下的行为
用 rem + JS 动态 font-size 是最稳的方案
核心是把 html 的 font-size 当作缩放标尺：设计稿宽 1920px，约定 1rem = 80px（即 1920 ÷ 24），那么整个页面所有尺寸都用 rem 写，JS 动态调整根字号，全局就等比缩放。
关键代码逻辑：
立即学习“前端免费学习笔记（深入）”；
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
function setRem() {
const baseWidth = 1920;
const scale = Math.min(
document.documentElement.clientWidth / baseWidth,
document.documentElement.clientHeight / 1080
);
document.documentElement.style.fontSize = `${scale * 80}px`;
}
setRem();
window.addEventListener('resize', setRem);- 必须用
Math.min()而不是Math.max()，否则内容会溢出视口触发滚动条 - 所有样式（字体、
padding、width、height）必须统一用rem，不能混用px或vh - 第三方组件（如
echarts）需手动传入devicePixelRatio或调用resize()，否则 canvas 渲染模糊
calc() + min() 纯 CSS 方案的适用边界
如果你不能引入 JS（比如嵌入到某些低权限 CMS 或 iframe 沙箱环境），可用这个降级方案，但仅适用于「固定宽高比」且「内容区域可裁剪」的场景。
示例（以 1920×1080 为基准）：
body {
transform: scale(
calc(min(100vw / 1920, 100vh / 1080))
);
transform-origin: 0 0;
width: calc(1920px / min(100vw / 1920, 100vh / 1080));
overflow: hidden;
}- 这个写法本质是模拟 JS 的缩放逻辑，但浏览器兼容性差：Safari 15.4 以下不支持
min()在calc()中嵌套 -
transform-origin: 0 0必须显式设置，否则默认居中缩放会切掉顶部内容 - 所有
position: fixed元素需额外加transform: translateZ(0)触发重绘，否则可能错位
容易被忽略的细节：留白方向和容器上下文
等比缩放 ≠ 填满全屏。当屏幕宽高比与设计稿不同时（比如 2560×1600 是 16:10），必须决定是左右留白还是上下留白——纯 CSS 无法动态判断，JS 计算时得保留原始宽高比信息。
另外，这些地方常翻车：
-
aspect-ratio对position: absolute元素无效，对<img alt="HTML大屏可视化布局怎么做到完美等比例缩放" >直接写也常被忽略（浏览器优先尊重图片固有宽高比） - Flex 容器中子项默认
align-items: stretch，会强行拉高覆盖aspect-ratio计算，要加align-self: center -
object-fit只对<img alt="HTML大屏可视化布局怎么做到完美等比例缩放" >、<video></video>生效，对background-image完全无效；单独用它不配aspect-ratio，等于没锁比例
真正上线的大屏项目，几乎都绕不开 JS 控制根字号这一步。缩放本身不难，难的是让每个像素、每行文字、每个 tooltip 都按预期响应——而这依赖于统一的缩放源头和严格的单位约束。
