缩放属性
最后更新：2026-09-13
zoom 缩放属性
zoom 用于对元素进行非标准的缩放变换，可以按比例放大或缩小元素及其所有子元素。与 transform: scale() 不同，zoom 会影响元素的布局空间（会占据缩放后的实际空间），且会触发浏览器的完整重排。虽然它不是标准 CSS，但浏览器支持广泛。
| 分类 | |
|---|---|
| 初始值 | normal |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
zoom: normal | reset | <number> | <percentage>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
normal | reset | 关键字 | 预设值 |
<number> | <percentage> | 类型 | 缩放倍数 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| zoom | ✓ v10 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
注意： zoom 是非标准属性，未纳入 CSS 规范；在 Firefox 中不支持（旧版本完全不支持，新版本通过 layout.css.zoom.enabled 标志支持）。
提示： 如果需要标准且兼容性好的缩放效果，建议使用 transform: scale()；zoom 适合快速原型或内部项目。
❓ 常见问题
Qzoom 和 transform: scale() 有什么区别？
Azoom 会改变元素在文档流中的实际占用空间和布局尺寸，影响周围元素，相当于重新排版；transform: scale() 只改变视觉大小，布局空间保持不变。zoom 的缩放还会影响子元素的渲染尺寸（整体像素放大），并且会触发完整重排。跨浏览器一致性上 transform: scale() 更可靠。
Qreset 值是什么意思？
Areset 是 Safari 引入的非标准值，表示「重置缩放」，等效于 zoom: 1，但会阻止继承的 zoom 值继续影响该元素。默认 normal 表示与用户设置的页面缩放保持一致（相当于 1）。reset 应用场景有限，兼容性也主要在 WebKit 内核，跨浏览器需要测试。
Qzoom 的兼容性怎么样？Firefox 支持吗？
Azoom 历史上是 IE/WebKit 的非标准属性，Chrome、Edge、Safari 支持很好；Firefox 直到 2024 年的 126 版本才默认启用。它虽已开始进入 CSS Viewport 规范，但仍是「事实标准」。生产环境跨浏览器缩放建议用标准 transform: scale()。
Qzoom 会影响性能吗？
A会。zoom 改变布局尺寸，缩放时会触发重排和重绘，动画性能明显差于 transform: scale()。zoom 适合一次性设置页面或组件的缩放比例（如整体缩放适配），不适合逐帧动画。需要动画缩放时优先 transform: scale()，需要真实布局缩放时可用 zoom。
🏷️ 相关属性
💡 相关案例
📚 相关教程
