Html 响应网格-离子2

我需要你帮忙做这个网格。 调整窗口大小时，栅格不会保留初始形状。我需要电网响应，但我做不到。 我试了很多次，做了很多修改

这是到目前为止我的代码

主页{
*{
保证金：0；
填充：0；
}
离子头{
背景色：#fff；
高度：3em；
宽度：100%；
字体大小：15px；
}
离子工具栏{
高度：1米；
填充：0；
宽度：自动；
显示：块；
}
.工具栏md{
填充：4px；
最小高度：40px；
左侧填充：40px；
}
ion-toolbar.logo img{
高度：1.3em；
}
离子容器{
颜色：#fff！重要；
}
离子含量{
利润率：80px 0px；
最小高度：56vh；
}
离子色谱信息{
文本对齐：居中；
背景色：#fff；
边框：1px实心#ddd！重要；
}
ion-row.title ion col{
文本对齐：居中；
字体大小：粗体；
背景色：#eee；
边框：1px实心#ddd！重要；
}
ion-grid.footer-table{
宽度：30%；
}
}

事件
起源
命运
错误
第一件事
最后一件事
希腊字母表的第7个字母
SLI
ODBMS
6.
04/08/2017
04/08/2017

只需使用爱奥尼亚本身的de columns属性，默认情况下它是响应的

仅使用

col-2

将使所有视口中的所有列都具有2个空间宽度，因为网格中可以有12列，这将是6列

如果希望网格在不同的显示中具有不同的大小，则需要为所需的每个显示指定一个属性，并将其与以下对象关联：

• col-*

  或

  col xs-*

  ：每个视口的大小相同

• 列sm-*

  ：用于540px及以上

• col md-*

  ：用于720px及以上

• col lg-*

  ：用于940px及以上

• col xl-*

  ：用于1140px及以上

一个属性覆盖另一个属性。所以它很像引导网格组件（如果您已经使用过引导）

有关更多信息，请参阅文档：

---

希望这能有所帮助。

爱奥尼亚网格默认为响应。因此，您的自定义

CSS

样式存在问题。这里最好的做法是从头开始。这意味着不应用您的样式。然后逐个应用它，看看它在哪里阻止网格。这样您就可以找到发布的CSS

网格是一个功能强大的移动第一flexbox系统，用于构建自定义 布局。它受到Bootstrap网格系统的严重影响

网格由三个单元组成：网格、行和列。 列将展开以填充其行，并将调整大小以适应 附加列。它基于12列布局，具有不同的 基于屏幕大小的断点。列数和 断点可以使用SAS完全自定义

---

您可以使用。

删除所有自定义的

CSS

并查看结果？如果我删除样式，我在窗口中看不到任何内容，只有标题和徽标。我只想制作一个网格，它可以根据显示的位置（桌面或手机）调整大小