在创建数据大屏时遇到Echarts图表在全屏切换时变形的问题，原因是使用了`grid-template-rows: repeat(2, 1fr);`。改为百分比布局后，问题得到解决。经验证，使用`grid-template-rows: repeat(2, calc(50% - 10px));`配合`grid-gap: 10px;`可以避免图形拉长，确保Echarts在grid布局中尺寸稳定。
今天做数据大屏时遇到的问题，因为使用grid布局，并且习惯使用 1fr 这样的适应写法，不幸用在 rows上时，会出现问题，按F11来回切换全屏时，页面上的echarts图形reasize 会导致图形拉长，越来越往下掉。排查后确定，就是因为
grid-template-rows: repeat(2, 1fr);
这句话导致的，改成百分比就不会出现问题。
grid-template-rows: repeat(2, calc(50% - 10px));
grid-gap: 10px;
结论：grid布局行不要使用 fr
2579
1640
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
扫一扫
