vw/vh 导致图表失真是因只控制容器尺寸而未同步重绘 canvas；需调用图表 resize 方法、适配 devicePixelRatio、配合 ResizeObserver 及容器查询，并处理横竖屏切换。
用 vw 和 vh 做图表容器缩放，为什么常失真？
直接用视口单位（vw/vh）设宽高，图表容易拉伸变形或文字糊成一片——因为它们只管“占屏幕多大”，不管容器本身尺寸、比例或内部元素的渲染约束。
典型表现：chart-container 设了 width: 80vw; height: 50vh;，但图表库（如 Chart.js、ECharts）默认按像素初始化画布，缩放后 canvas 缓冲区没重绘，导致锯齿、模糊、坐标错位。
- 必须同步触发图表的
resize()方法（Chart.js）或resize()实例方法（ECharts） -
vw在小屏上可能让容器过窄，导致图例被截断；建议加min-width和min-height保底线 - 不要对
canvas元素本身设vw，而应控制其父容器，再让图表库自动适配
容器查询（@container）怎么配合图表生效？
容器查询不是“查屏幕”，而是查父容器的尺寸和类型，更适合嵌入式图表（比如 Dashboard 中的卡片）。但它需要两个前提：父容器有明确尺寸（非 content-fit），且启用了容器类型。
常见错误：写了 @container (width > 400px) { ... } 却没生效——因为父容器缺少 container-type: inline-size; 或 container-type: size;。
立即学习“前端免费学习笔记（深入）”；
- 给图表外层包裹一个
div.chart-card，并设置container-type: size; - 图表容器（如
div#myChart）用width: 100%; height: 200px;，高度不能是auto，否则容器查询无法计算 - 在
@container规则里改的是图表容器的height或字体大小，而不是直接操作canvas - 目前仅 Chromium 111+、Firefox 119+ 支持
@container，Safari 16.4+ 仅支持inline-size类型
Chart.js / ECharts 怎么配合 CSS 缩放不糊？
图表库内部 canvas 是位图，单纯 CSS 缩放（transform: scale()）会放大像素点，不是高清重绘。真正防糊，得让库自己按设备像素比（window.devicePixelRatio）重建 canvas。
- Chart.js 初始化时传
devicePixelRatio: window.devicePixelRatio || 1，并在窗口 resize 时调用chart.resize() - ECharts 要在
setOption后手动调echart.resize({ silent: true })，且确保容器已渲染完成（可用getBoundingClientRect()校验尺寸变化） - 避免用
width: 100vw+transform: scale(0.8)这类组合，它会让devicePixelRatio判断失效 - 若用
responsive: true，务必设maintainAspectRatio: false，否则宽高比锁定会导致缩放异常
移动端横竖屏切换时图表错位怎么办？
横屏切回竖屏，容器宽度突变，但图表未及时重绘，常表现为右侧留白、图例偏移、坐标轴文字重叠——本质是 resize 事件监听不完整或节流不当。
- 别只监听
window.onresize，iOS Safari 横竖屏切换有时不触发该事件，要加orientationchange补充 - 用
ResizeObserver监听图表容器更可靠，且避免高频触发：new ResizeObserver(() => chart.resize()).observe(container) - 在
resize回调里加防抖（如 100ms），但别超过 300ms，否则用户旋转设备后视觉反馈滞后 - 某些安卓 WebView 不支持
ResizeObserver，需 fallback 到定时轮询getBoundingClientRect()
真正难的不是写几行 vw 或加个 @container，而是让 CSS 尺寸变化、JS 图表生命周期、设备像素比、浏览器 resize 行为这四者咬合上。漏掉任意一环，图表就只是“看起来缩了”，而不是“正确地响应了”。
