Skip to content

ufologist/zoom

Repository files navigation

Zoom

changelog license

等比例缩放适配

适配示例

功能

  • 让元素等比例缩放以撑满其父容器的宽或者高
  • 让元素缩放之后是水平垂直居中于父容器的

适用场景

  • 固定了画布宽高的场景
  • 就好比给你一张纸, 让你在这张纸上摆放元素
  • 例如设计类软件的画布(舞台), 基于这个画布布置出一个 1920*1080 宽高的数据大屏
  • 我们需要将这个画布(纸)塞进任意尺寸的屏幕里
  • 即让数据大屏在任何屏幕下都是适配的

使用方法

推荐将 dist/zoom.js 内嵌到 <head>

示例

// 要适配的元素
var element = document.querySelector('.foo');
// 等比例缩放适配
new Zoom(element);

参考