等比例缩放适配
- 让元素等比例缩放以撑满其父容器的宽或者高
- 让元素缩放之后是水平垂直居中于父容器的
- 固定了画布宽高的场景
- 就好比给你一张纸, 让你在这张纸上摆放元素
- 例如设计类软件的画布(舞台), 基于这个画布布置出一个
1920*1080
宽高的数据大屏 - 我们需要将这个画布(纸)塞进任意尺寸的屏幕里
- 即让数据大屏在任何屏幕下都是适配的
推荐将 dist/zoom.js 内嵌到 <head>
中
// 要适配的元素
var element = document.querySelector('.foo');
// 等比例缩放适配
new Zoom(element);