vue数据大屏解决方案

原理：根据自己的长宽比设置一个UI的尺寸作为标准，然后根据屏幕的宽高度进行缩放，确保长边能完全显示出来

getScale=() => {
    // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
    const {width=1920, height=1080} = this.props
    let ww=window.innerWidth/width
    let wh=window.innerHeight/height
    return ww<wh?ww: wh
}
setScale = debounce(() => {
    // 获取到缩放比，设置它
    let scale=this.getScale()
    this.setState({ scale })
}, 500)

window.addEventListener('resize', this.setScale)

transform: `scale(${scale}) translate(-50%, -50%)`,
 -webkit-transform: `scale(${scale}) translate(-50%, -50%)`,

.scale-box{
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;
}

链接：参考自 https://www.jianshu.com/p/b2fd58d31515
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。