仪表板桌面布局响应？答案

【问题标题】：Dashboard desktop lay-out responsive?仪表板桌面布局响应？
【发布时间】：2019-05-28 14:40:34
【问题描述】：

为不同设备构建 icCube 仪表板是通过布局处理的。这很好用。但是对于桌面仪表板，屏幕尺寸和分辨率范围很广，您只能制作一种桌面布局。

例如，如果我在办公室，我有一台 15 英寸的笔记本电脑，它连接到工作台上的 27 英寸显示器。在我的显示器上，与笔记本电脑屏幕相比，我有更多空间来放置更多小部件。为不同的屏幕尺寸/屏幕分辨率创建单独的布局或制作响应式仪表板会很好。

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

【问题讨论】：

标签： iccube-reporting

【解决方案1】：

我们还没有找到解决我们问题的响应式布局。我们对想法持开放态度，但拥有一个可在 10 英寸和 27 英寸显示器上“工作”的同一个仪表板并不容易。

现在您在 icCube 中有几个选项：

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

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

_希望对你有帮助。

【讨论】：

如何制作可随屏幕大小缩放的布局？我还没想好怎么做。

【解决方案2】：

简单的仪表板网格布局

<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>

【讨论】：