大屏适配--React hook

前言

目前市场可视化大屏越来越多，百度的echarts等，或者阿里的DataV、百度的Suger、腾讯RayData等直接进行制作，适配问题大多数都是使用px2rem方法进行转换，大屏的适配基本是根据设计稿尺寸制作比例，适配各种屏幕的其实很多组件也大多是进行比例缩放；
前端的布局基本使用display: flex/gird布局方式;

---

代码如下：

import React, { useState, useEffect } from 'react';
import s from './index.less'

interface IndexProps {
  width: number,
  height: number
}

// 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
const getScaleHandler = (props: IndexProps) => {
  const { width, height } = props;
  let ww = window.innerWidth / width
  let wh = window.innerHeight / height
  return ww < wh ? ww : wh
}
const LargeScreen: React.FC<IndexProps> = (props) => {
  const { width, height } = props
  const [scale, setScale] = useState<number>(getScaleHandler({ width, height }));
  const setScaleHandler = () => {
    setTimeout(() => {
      // 获取到缩放比，设置它
      let scale = getScaleHandler({ width, height })
      console.log(scale);
      setScale(scale)
    }, 500)
  }
  useEffect(() => {
    window.addEventListener('resize', setScaleHandler)
  }, []);
  return (
    <div
      className={s['scale-box']}
      style={{
        transform: `scale(${scale}) translate(-50%, -50%)`,
        WebkitTransform: `scale(${scale}) translate(-50%, -50%)`,
        width: props.width,
        height: props.height
      }}
    >
      {props.children}
    </div>
  );
};

export default LargeScreen;

<LargeScreen width={1920} height={1080}><div></div></LargeScreen>

width=1920，height=1080

---

参考文章

直接使用的插件：
DataV-React
react-scale-box
react-big-screen
grid布局自动生成代码