transform: scale() 是唯一能实现文字、边框、内边距、背景、伪元素等全要素等比缩放且不破坏文档流的真缩放方案，其他如 font-size、vw、zoom 均为局部模拟，存在导出错位、跨屏异常、兼容失效等问题。
等比例缩放不是“让页面变小一点”那么简单——它要求文字、边框、内边距、背景、伪元素全部按同一系数缩放，且不破坏文档流、不截断内容、不模糊字体。只有 transform: scale() 能做到这点，其他方式（如改 font-size、用 vw、调 zoom）都只是局部模拟，会在导出、打印、高亮、滚动或跨屏时暴露错位。
为什么不能只用 font-size 或 vw 控制表格/容器缩放
改 font-size 只动文字，边框粗细、padding、line-height 不同步，列宽计算失准；用 width: 50vw 等会破坏表格语义，导出 Excel 时列宽崩坏、表头错位；zoom 在 Firefox 完全失效，Chrome 已弃用，且不触发重排，导致 getBoundingClientRect() 返回原始尺寸。这些都不是真缩放，是“看起来像”的临时补丁。
transform: scale() 必须配齐的四要素
单独写 transform: scale(0.85) 会立刻出问题：表格左上角消失、横向滚动异常、底部被遮住、Windows 下字体发虚。必须同时满足：
-
transform-origin: top left—— 否则默认以中心为原点，缩放后整体偏移 -
width: fit-content—— 否则浏览器仍按原始宽度分配空间，scale()只是“画小了”，但占位没变 - 外层容器设
overflow-x: auto+padding-bottom: 20px——<table> 自身不支持 <code>overflow，必须用<div class="table-container"> 包裹；<code>padding-bottom是为缩放后表格底部留出滚动条空间 -
transform: translateZ(0)加在缩放元素及所有子单元格（th、td）上 —— Windows Chrome/Edge 默认 CPU 渲染，加这句强制 GPU 加速，消除模糊 - 父容器设
position: relative; width: 100%; height: 0; padding-bottom: 56.25%（16:9）—— 百分比基于父宽计算，“借宽算高” - 子容器设
position: absolute; top: 0; left: 0; width: 100%; height: 100%—— 填满 padding 撑开的空间 - 子容器内所有内容（文字、图片、按钮）必须用相对单位（
rem、%、em）或配合transform: scale()统一缩放，否则比例会失守 - 若嵌在 Flex 容器中，父容器需加
min-width: 0和max-width: 100%，否则 Flex 的默认min-width: auto会让width: 100%失效
响应式容器内保持宽高比并缩放内容的 padding 技法
当你要缩放的是一个复杂内容块（比如简历卡片、视频封面、轮播图区域），而不是纯表格，padding-bottom + position: absolute 是兼容性最稳的方案，尤其要支持 iOS 14 或微信旧 WebView 时：
真正难的不是第一次写对，而是缩放链不能断：从 viewport 设置、到容器宽度基准、再到 padding 计算、最后到子内容单位一致性，任何一环用了固定像素或忽略上下文，缩放就会在某个屏幕尺寸下突然错位或塌陷。
