公司要求后台管理系统首页做成大屏怎么合理布局呀？

Question

大致布局如上所示，既要保证浏览器窗口变化时布局不受影响，也要保证在不同设备上看到的效果大体一致。分辨率未知。😥

• 我之前有考虑过使用vw、vh这样的相对视窗单位，但子模块高度用vh的话，不同设备显示的效果不一样，在电脑上可能刚好合适但放到笔记本上位置就错乱了。
• 如果子模块用百分比的话，对于echarts图像，不太好确定容器的宽度和高度，这也导致图像在容器中的位置不对。
• 大佬们有啥好的布局意见吗？我都可以尝试一下。

Answer 1

笔记本是否错乱取决于你们兼容的最小尺寸，保证最小尺寸时文字大小不低于12px,就不会错乱

Answer 2

问题的关键 即不是实际宽或高的大小，也不是 百分比问题，而是 宽高比

假设大屏宽高比是 16:9，那么 在笔记本上 对应的这个容器宽高比 固定设为 16:9
可以了解一下 aspect-ratio

剩下的就是按比例，布局可以用 js，也可以用 css。