最近，我一直在做一个大屏幕项目，进行了很多绕道，并踩了很多坑。本文总结了我在自适应大屏幕项目中的经验。
自适应需求：尽可能与所有分辨率兼容
React17 https://zh-hans.reaectjs.org/ css stypled- components https：// stypled-components.com/docs/basics/basics Basic Styles较少编写，然后介绍了全球。
样式 - 组件图表recharts https://recharts.org/en-us/它适用于React Icon库，支持SVG语法，非常灵活的Echarts-for- react- react- react https：//git.ccharts-for- react/react/reactEcharts的组件包装工具，整个网络开发人员的下载最多的卷获取接口的返回数据
大屏幕通常是基于网格的布局，非常适合使用网格布局
网格输入文章：https：//www.ruanyifeng.com/blog/2019/03/grid-layout-terial.html css grid grid grid blees layout tutorial tutorial-yifengfengen
如果您没有开始，可以根据我的写作理解它。
包装了一些通用的基本组件
网格容器
可以看出，以上段落是我最喜欢的部分，可以在不计算的情况下计算（我的设计草案是1920x1080）
最早的布局，我怀疑生活
集合
看到效果
非常漂亮的网格管理
网格适应移动终端需要将媒体查询添加到GridDemowRap
更多样式（自适应移动终端）
看到效果
如果布局百分比或网格布局，我们的代码数量将很难维护/理解，并且网格可以轻松绘制网格
为了适应此内容，通常有一些解决方案，例如百分比，REM，比例等。掘金上也有许多文章。我的需求是：1。您可以在Blue Lake 2上复制CSS代码2。它必须计算3.的百分比3.写作完成后，写作完成。不关心，全自动分辨率。经过大量调查和实际战斗后，决定使用调度方案（使用resizeObserver.Observe Monitoring Container Change）Gogogo）Gogogo
首先发布图片，以便每个人都有以下代码的一点概念~~~
从“样式组件”中导入样式；从“ lodash-es/debonce”导入de
maxheight？：数字;deboncetime？：数字;id？：字符串|数字;className？：字符串|数字;}
const响应wrap = stypled.div;
//无法容纳容器，因此绝对const响应= styplet.div<{ scale?: number; left: string; top: string; }>`发表：绝对；左：$ {（p）=> p.left ||0};顶部：$ {（p）=> p.top ||0};
变换：比例（$ {（p）=> p.scale || 0}）;变换原始：左上角；
导出默认函数响应（props：propiveprops）{const {consid {width = 500，height = 500，} = props;
const [已安装，设定的] = usestate（false）;const constainerref = useref（null）;const [scale，setScale] = usestate（0）;//放置比例后，const [posity，（{top：0“，左：“ 0”，}）;
const getContainersize =（）=> {if（！containerref.current）{return null;}
};
const UpdationMensionsImdiate =（）=> {if（！已挂载）{return;} const {rwidth，rheight} = getContainersize（）;
，TargetRef：ContainerRef，}）;//使用useeeefect（（）=> {if（noveed）{handleresize（）;}，[motaled]）;
useffect（（）=> {setMount（true）;}，[]）;
{children}）;}````````````
仿真T1Block组件
请参阅效果组件根据容器的尺寸计算了相应的比例
调整大小的效果
4K在失真下仍处于良好状态
响应组件可能会遇到的问题。某些图表组件/地图组件的规模可能异常，因此我必须考虑第二个解决方案
useresize.ts
用户化的用法
原始：https：//juejin.cn/post/7100137233281187871