缩放时元素比例不一致的本质是不同CSS单位对浏览器缩放响应机制不同；应区分布局缩放（优先用vw/vh）和视觉缩放（用transform: scale()），并避免伪缩放陷阱。
缩放时元素比例不一致，本质是不同单位对浏览器缩放（Ctrl+/- 或系统DPI缩放）的响应方式不同。CSS像素在缩放下并非物理等比变化，而 vw/vh 和 transform: scale() 的行为机制也截然不同——不能混用或简单替换，需按场景选对方案。
优先用 vw/vh 做响应式布局基准
vw/vh 基于视口尺寸计算，不受浏览器缩放影响（缩放时视口宽高不变），适合做容器、间距、字体等全局尺度控制。
- 标题字号写成
font-size: 4vw;，在 100%–200% 缩放下始终占视口宽度 4%，视觉比例稳定 - 卡片宽度用
width: 80vw;，边距用margin: 2vh 1vw;，避免缩放后“挤出”或“留白过大” - 慎用
vmin/vmax：它们响应的是视口短边/长边，在横竖屏切换或极端缩放下可能突变，建议先测试临界值
用 transform: scale() 仅处理局部动态缩放
transform: scale() 是纯视觉变换，不影响文档流和布局尺寸，适合图标、按钮、弹窗等需要独立缩放的组件，但必须配合 transform-origin 和尺寸重置。
- 缩放一个按钮时，加上
transform: scale(1.2); transform-origin: center;，再用width: calc(100% / 1.2); height: calc(100% / 1.2);把原始占位拉回原尺寸，防止布局跳动 - 不要对整个页面根元素用
scale：会导致文字模糊、表单焦点偏移、滚动条错位，且无法解决字体渲染锯齿问题 - 搭配
will-change: transform;可提升动画性能，但仅在真正需要过渡动画时启用
避开“伪缩放陷阱”：禁用用户缩放 ≠ 解决缩放问题
禁止缩放（user-scalable=no）只是掩盖问题，且违反可访问性规范。真实场景中，Windows 高DPI缩放、macOS 普通缩放、Chrome 自定义缩放都不可控，应主动适配。
立即学习“前端免费学习笔记（深入）”；
- 检查
body是否意外设置了zoom（IE遗留属性）或transform，它们会干扰现代缩放逻辑 - 字体推荐用
rem+html { font-size: clamp(16px, 2.5vw, 20px); }，兼顾默认大小、缩放鲁棒性和大屏可读性 - 用 Chrome DevTools 的 “Rendering” 面板开启 “Emulate CSS media feature prefers-reduced-motion” 和 “Emulate CSS media feature forced-colors”，提前发现缩放下的对比度与动画异常
基本上就这些。核心不是统一单位，而是分清“布局缩放”和“视觉缩放”——前者靠视口单位锚定，后者靠 transform 精控。不复杂但容易忽略。
