transform: scale() 是唯一真正等比缩放整个容器（含文字、边框、padding、背景、伪元素）的方案，因其将渲染树整体缩放，而 font-size、aspect-ratio 等仅控制局部。
transform: scale() 是唯一真正等比缩放整个容器（含文字、边框、padding、背景、伪元素）的方案；其他如 font-size、vw、aspect-ratio 都只控制局部，无法保证整体比例一致。
为什么 transform: scale() 是唯一真等比缩放
等比缩放的本质是“把整个渲染树当一张图缩放”，而不是分别调文字、边框、间距。只有 transform: scale() 能做到这点：
-
font-size: 4vw只变字体，行高、边框粗细、padding不同步 → 列宽错位、高亮偏移、导出 Excel 格式错乱 -
aspect-ratio只锁定容器宽高比，不缩放内容本身；它不管里面文字多大、图片多粗、阴影多深 -
max-width: 100%; height: auto仅适用于<img>这类替换元素，对<div> + 文字组合完全无效 <li>直接改容器 <code>width和height会破坏文档流计算，导致嵌套 flex/grid 布局崩坏 - 必须显式写
transform-origin: top left，锚定缩放起点为左上角 - 别同时设
width: 100%和scale()：浏览器先按 100% 分配空间再缩放，列宽计算彻底失准 -
scale(0.85)是较安全起始值；低于0.7在多数屏上字迹难辨，iOS 上尤其吃力 - 缩放不改变文档流占位宽度，视觉变小了但浏览器仍按原始尺寸布局 → 必须配合
width: fit-content - 外层
<div class="table-container"> 需设 <code>overflow-x: auto，否则横向溢出不可滚动 - 必须加
padding-bottom: 20px，否则缩放后表格底部紧贴视口底边，最后一行被滚动条遮住 - iOS Safari / 微信 WebView 需额外加
-webkit-overflow-scrolling: touch，否则横滑卡顿、滚动条不可见 - 容器高度不能写死（如
height: 300px），否则内容多时底部被截断 - 只给
<table> 加 <code>transform: scale() translateZ(0)不够 ——<th> 和 <code><td> 里的文字仍可能糊 <li>必须全覆盖：<code>#summary-table { transform: scale(0.85) translateZ(0); }+#summary-table th, #summary-table td { transform: translateZ(0); } - 微信 WebView 对此更敏感，漏掉任意一层都可能糊；别依赖
will-change（已弃用）
transform: scale() 必须配 transform-origin: top left
默认缩放中心是元素正中心，scale(0.85) 后左上角大概率被裁出视口外——尤其在 flex 容器、带 margin 的父级或 modal 中更明显。
外层容器必须设 overflow-x: auto 和 padding-bottom
<table> 或任意缩放容器自身不支持 <code>overflow，加了也无效。必须用块级容器包裹：
Windows Chrome 字体模糊？加 translateZ(0) 触发 GPU 加速
缩放后文字发虚、边框锯齿，在 Windows Chrome / Edge 上极常见，本质是浏览器用了 CPU 渲染。
真正难点不在怎么写，而在缩放后交互反馈是否一致：hover 区域、点击热区、焦点 outline、打印样式、导出 PDF/Excel 的格式还原 —— 这些全要重新验证，不是加个 scale() 就完事。
