总结
| zoom | scale | |
|---|---|---|
| CSS标准 | ||
| 语法 | zoom: <percentage or number> | transform: scale(<number>) |
| 浏览器兼容性 | firefox不行 | 都OK |
| 默认行为 | 基于元素左上角缩放 | 基于元素中心, 可通过transform-origin设置 |
| 取值 | 正数 | 可为负值 |
| 元素行为 | 尺寸及占据空间都改变 | 尺寸改变, 占据空间不变 |
getBoundingClientRect | height, width不变 | height, width跟随缩放改变 |
CSS Scale与Zoom的区别
发布于: 5/25/2022 阅读大约需要0分钟
| zoom | scale | |
|---|---|---|
| CSS标准 | ||
| 语法 | zoom: <percentage or number> | transform: scale(<number>) |
| 浏览器兼容性 | firefox不行 | 都OK |
| 默认行为 | 基于元素左上角缩放 | 基于元素中心, 可通过transform-origin设置 |
| 取值 | 正数 | 可为负值 |
| 元素行为 | 尺寸及占据空间都改变 | 尺寸改变, 占据空间不变 |
getBoundingClientRect | height, width不变 | height, width跟随缩放改变 |