数据大屏“全屏且不变形”的核心是等比缩放+居中填充：以1920×1080设计稿为基准，用JS计算Math.min(w/1920, h/1080)缩放因子，动态设置html.font-size驱动rem布局，配合overflow: hidden和全rem样式实现保比例自适应，避免拉伸、留黑或滚动条。
数据大屏要真正“全屏且不变形”，不能只靠 width: 100vw; height: 100vh 硬撑——那只会拉伸变形、上下/左右留黑、滚动条乱跳。核心是：保持设计稿比例（如 1920×1080 → 16:9），再让内容等比缩放并居中填充视口，类似 background-size: contain 的逻辑，但作用于整个 DOM 结构。
为什么直接设 100vw/100vh 会出问题
常见错误现象：height: 100vh 在 Safari 或部分安卓 WebView 中可能计算不准；width: 100vw 遇到浏览器滚动条时实际宽度变小，导致横向溢出；更关键的是，它不保比例——16:9 的图表在 4:3 屏上会被压扁或拉长。
- 设计稿是 1920×1080，但屏幕是 3840×2160（仍是 16:9）→ 可等比放大，没问题
- 屏幕是 2560×1440（16:9）→ 同样可放大填满
- 屏幕是 2560×1600（16:10）→ 宽度富余，必须左右留白、上下撑满、水平居中
- 屏幕是 1280×1024（5:4）→ 高度富余，必须上下留白、左右撑满、垂直居中
纯 CSS 没法动态判断宽高比并切换留白方向，所以必须靠 JS 计算缩放因子 + rem 基准调整。
用 rem + 动态 font-size 实现等比缩放
原理：把 html 的 font-size 当作缩放标尺。设计稿宽 1920px，约定 1rem = 80px（即 1920 ÷ 24），那么 1920px 就等于 24rem。所有样式用 rem 写，JS 根据当前视口宽高比和尺寸动态设置 document.documentElement.style.fontSize，就能驱动全局缩放。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 关键代码逻辑（不依赖库）：
function setRem() { const w = document.documentElement.clientWidth; const h = document.documentElement.clientHeight; const designW = 1920; const designH = 1080; // 按照 contain 逻辑：取宽高缩放因子的较小值 const scale = Math.min(w / designW, h / designH); document.documentElement.style.fontSize = 80 * scale + 'px'; } setRem(); window.addEventListener('resize', setRem); - 必须加
html, body { height: 100%; overflow: hidden; margin: 0; padding: 0; }，否则clientHeight取不到真实视口高 - CSS 中所有尺寸（宽高、边距、字体）都用 rem，例如：
width: 24rem;对应设计稿 1920px
如何处理字体模糊、1px 边框发虚
缩放后，1rem 变成比如 64px，那 font-size: 0.125rem（原 10px）就只剩 8px，文字易糊；同样，border: 0.0125rem solid #ccc（原 1px）在高 DPR 设备上可能渲染为 0.5 物理像素，看不见。
- 字体最小不要低于
0.125rem（对应设计稿 10px），可用媒体查询兜底：@media (max-width: 1200px) { body { font-size: 14px; } } - 1px 边框改用
transform: scaleY(0.5)或box-shadow: 0 0 0 0.5px #ccc，避免直接写0.0125rem - 高清图资源建议准备 2x 版本，用
image-set()或 srcset 切换，否则缩放后图片马赛克明显
视频/Canvas/iframe 类内容怎么同步适配
它们不继承 rem 缩放，需单独处理。比如大屏里嵌了 ECharts Canvas 或监控视频流，直接设 width: 100%; height: 100% 会失真。
- ECharts：初始化时传
renderer: 'canvas'，并在window.resize回调里调用chart.resize()，别忘了加防抖 - 视频：
<video>必须加object-fit: cover，且父容器用 rem 设置宽高，自身用width: 100%; height: 100%占满 - iframe（如嵌第三方地图）：无法直接缩放，建议用
transform: scale(0.8)+transform-origin: 0 0手动匹配，但注意交互坐标偏移
最易被忽略的是：缩放后 canvas 的 offsetWidth/offsetHeight 和 getContext('2d').canvas.width/height 不一致，必须手动同步设置 canvas 元素的 width 和 height 属性值（不是 CSS）。
