标签：state extends inner info 变化 width char port 大屏
想必近几年前端的数据可视化越来越重要了，很多甲方爸爸都喜欢那种炫酷的大屏幕设计，类似如下这种：
遇到的这样的项目，二话不说，echarts或者antv，再搭配各种mvvm框架（react，vue），找二次封装过的组件，然后开始埋头开始写了，写着写着你会发现，如何适配不同屏幕呢？css媒体查询吧，用vw吧，哪个好点呢。其实写到最后，我觉得都不好
对于这种拿不定主意的情况呢，最好还是参考大厂的做法，于是去找了网易有数，百度suger等，他们是如何写这样的页面的
仔细观察他们都采用了css3的缩放transform: scale(X)属性，看到这是不是有种豁然开朗的感觉
于是我们只要监听浏览器的窗口大小，然后控制变化的比例就好了
以React的写法为例
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)
resize事件最好加个节流函数debouncewindow.addEventListener(‘resize‘, this.setScale)
然后一个简单的组件就封装好了
import React, { Component } from ‘react‘;
import debounce from ‘lodash.debounce‘
import s from ‘./index.less‘
class Comp extends Component{
constructor(p) {
super(p)
this.state={
scale: this.getScale()
}
}
componentDidMount() {
window.addEventListener(‘resize‘, this.setScale)
}
//得到呈现的屏幕宽高比
getScale=() => {
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)
render() {
const {width=1920, height=1080, children} = this.props
const {scale} = this.state
return(
<div
className={s[‘scale-box‘]}
style={{
transform: `scale(${scale}) translate(-50%, -50%)`,
WebkitTransform: `scale(${scale}) translate(-50%, -50%)`,
width,
height
}}
>
{children}
</div>
)
}
componentWillUnmount() {
window.removeEventListener(‘resize‘, this.setScale)
}
}
export default Comp
.scale-box{ transform-origin: 0 0; position: absolute; left: 50%; top: 50%; transition: 0.3s; }
标签：state extends inner info 变化 width char port 大屏
原文地址：https://www.cnblogs.com/zhangyezi/p/13186652.html
