纯CSS全局等比缩放最简方案是transform: scale()，但会破坏布局流、错位fixed元素、影响点击热区；生产环境推荐rem+JS动态调整根字号，兼顾健壮性与可维护性。
直接说结论：纯 CSS 实现全局等比缩放，transform: scale() 是最简单粗暴的解法，但它会破坏布局流、影响点击区域、错位 fixed 元素；真正健壮的方案是用 rem 或 vw 驱动尺寸，配合 JS 动态调整根字号 —— 这才是能上线、可维护、不翻车的做法。
用 transform: scale() 快速缩放但要防崩
它只是把整个 body 当成一张图拉伸，浏览器不重新计算布局，所以：
-
transform: scale(0.8)后，click热区仍按原始坐标响应，鼠标点在“视觉上”的按钮上，实际可能点到隔壁元素 - 所有
position: fixed元素（比如回到顶部按钮、悬浮菜单）会相对视口错位，因为 scale 不影响 fixed 的定位基准 - 打印、截图、DevTools 测量都显示缩放前的原始尺寸，调试困难
- 如果页面本身有
overflow: hidden容器，scale 后内容可能被意外裁剪
真要用，至少加这三行保底：
body {
transform: scale(0.9);
transform-origin: 0 0;
width: 111.111vw; /* 1 / 0.9 ≈ 111.111 */
}否则 body 缩放后宽度变窄，右侧留白。
立即学习“前端免费学习笔记（深入）”；
rem + JS 动态根字号才是生产环境首选
原理很简单：让 html 的 font-size 随屏幕宽度线性变化，所有用 rem 写的尺寸自动同比例缩放。
- 设计稿宽假设是
1920px，就设基准html { font-size: 100px; }（即 1rem = 100px），那么 1920px 宽下 1rem 刚好 = 100px - JS 监听
resize，算出当前缩放比：document.documentElement.clientWidth / 1920，再乘以 100，赋给document.documentElement.style.fontSize - 所有字体、边距、宽高都用
rem，比如标题font-size: 2.4rem→ 实际就是 240px（1920 下），1280 下自动变成 160px
注意两个坑：
- 不要在 CSS 里写
html { font-size: calc(100vw / 19.2); }—— calc 不支持除法变量，且 Safari 对 calc 中 vw 运算兼容差 - Vue/React 项目里，别只在
mounted执行一次，必须加window.addEventListener('resize', ...)，不然横竖屏切换就卡死
vw 单位适合局部强响应，但慎用于全局
vw 是视口宽度的 1%，写 width: 50vw 就是永远占一半屏幕，不需要 JS。但它的问题很实在：
- 小屏下
font-size: 5vw可能缩到 8px，文字不可读；大屏下又可能飙到 40px，排版爆炸 - 无法像
rem那样统一控制缩放基点，每个用vw的地方都要单独调参 - IE11 不支持
vw，若需兼容，得配font-size: 16pxfallback
更适合的用法是混合：比如导航栏高度用 6vh，按钮圆角用 0.5vw，而正文行高、字号仍走 rem 控制节奏。
图片和 SVG 的等比缩放不能靠全局 scale
你给 img 或 svg 加 transform: scale()，只会把它当图形拉伸，丢失语义、alt 文本、SEO，而且无法响应容器变化。
- 图片请老实用
max-width: 100%; height: auto;+srcset/sizes，这是 HTML5 原生保障等比与带宽的组合 - SVG 必须配
viewBox，去掉width/height的像素值，改用width: 100%; height: auto;，再加preserveAspectRatio="xMidYMid meet" - 如果 SVG 里有文字，字号也得用
rem或em，不能写死12px，否则缩放后文字大小不随图形同步
最易被忽略的是：父容器没设 width，max-width: 100% 就失效；SVG 的 viewBox 宽高比和容器实际宽高比不一致时，preserveAspectRatio 的取值会决定是留白还是裁剪 —— 这些细节不调，等比就只是个幻觉。
