仪表板桌面布局是否响应？

Question

为不同设备构建icCube仪表板是通过布局进行的。这很好用。但是当涉及到桌面仪表盘时，屏幕尺寸和分辨率范围很广，您只能进行一个桌面布局。

例如，如果我在办公室，我拥有一台15英寸的笔记本电脑，可连接到工作台上的27英寸显示器。在我的显示器上，我的笔记本计算机屏幕上有更多的空间来容纳更多的小部件。最好为不同的屏幕尺寸/屏幕分辨率创建单独的布局，或者制作一个响应式仪表板。

我很好奇是否有解决方案来处理不同的屏幕尺寸/屏幕分辨率。

Answer 1

简单的仪表板网格布局

<div class="grid-container">
  <header class="header"></header>
  <aside class="sidenav"></aside>
  <main class="main"></main>
  <footer class="footer"></footer>
</div>

需要应用CSS

/* Simple dashboard grid CSS */

/* Assign grid instructions to our parent grid container */
.grid-container {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 50px 1fr 50px;
  grid-template-areas:
    "sidenav header"
    "sidenav main"
    "sidenav footer";
  height: 100vh;
}

/* Give every child element its grid name */
.header {
  grid-area: header;
  background-color: #648ca6;
}

.sidenav {
  grid-area: sidenav;
  background-color: #394263;
}

.main {
  grid-area: main;
  background-color: #8fd4d9;
}

.footer {
  grid-area: footer;
  background-color: #648ca6;
}

为页眉和页脚元素创建样式和结构；先前声明的网格区域

<style>
  .header, .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background-color: #648ca6;
  }
</style>

<header class="header">
  <div class="header__search">Search...</div>
  <div class="header__avatar">Your face</div>
</header>

<footer class="footer">
  <div class="footer__copyright">&copy; 2019</div>
  <div class="footer__signature">Sample</div>
</footer>

Answer 2

我们尚未找到能够解决我们问题的快速响应式布局。我们乐于接受想法，但要在10英寸和27英寸的显示器上都可以正常工作的仪表板并非易事。

目前，您在icCube中有一些选择：

• 创建固定的布局（这是我们首选的选项之一）
• 创建可随屏幕尺寸缩放的布局
• 创建具有多种布局的报告（适用于平板电脑，手机，打印）。尚未针对不同的屏幕尺寸。

实际上，您可能会创建一组不同的报告。

_希望有帮助。