Ionic 2 响应式网格答案

【问题标题】：Ionic 2 responsive gridIonic 2 响应式网格
【发布时间】：2016-07-01 07:09:12
【问题描述】：

如何在 Ionic 2 中制作响应式网格？ Ionic 1 支持保留类，如 responsive-md 或 responsive-sm，它们使网格响应，但它们似乎在 Ionic 2 中不起作用。

就我而言，我有一个<ion-row> 和三个<ion-col>。当显示宽度低于阈值时，我希望这些列彼此低于。 Ionic 2可以做到这一点吗？

【问题讨论】：

【解决方案1】：

Ionic 2、Ionic 3+ 的更新：

Ionic 现在拥有基于flexbox css 的惊人网格系统。你可以在docs看到。
要使用它，就这么简单：

<ion-grid>
  <ion-row>
    <ion-col col-3></ion-col> //This col will take 3/12 = 25% width;
    <ion-col col-4></ion-col> //This col will take 4/12 = 33.33% width;
    <ion-col></ion-col>       //This col will take the rest of width;
  </ion-row>
</ion-grid>

【讨论】：

【解决方案2】：

现在 Ionic 正在使用Bootstrap grid system。我们还可以在 ion-grid 上使用 fixed 属性来更好地利用屏幕宽度。

我尝试使用以下代码来满足我的要求。请按照cmets理解。

我们可以覆盖断点，所以我这样做了：

$grid-breakpoints: (
  sm: 0,
  ssm: 320px, // second small breakpoint
  tsm: 372px, // third small breakpoint. This is the threshold for high resolution devices. 
  md: 768px,
  lg: 1024px
);

$grid-max-widths: (
  sm: 292px,
  ssm: 100%,
  tsm: 100%,
  md: 720px,
  lg: 960px
);

这是使用自定义断点的代码：

 <ion-grid fixed>
      <ion-row>
        <ion-col col-2 col-tsm-2>
          1 of 3
        </ion-col>
        <ion-col col-10 col-tsm-6>
          2 of 3
        </ion-col>
        <ion-col col-4 push-2 push-tsm-0 col-tsm-4> // pushing 2 columns at the beginning for low resolution devices
          3 of 3
        </ion-col>
      </ion-row>
    </ion-grid>

对于低分辨率设备，即低于最小宽度的设备，您将获得以下输出：372px;

以上设备的输出如下：

【讨论】：

【解决方案3】：

虽然它目前似乎没有出现在 Ionic 2 文档中，但 Ionic 1 中的 responsive-md、responsive-sm （等等）类现在成为 Ionic 2 中的单独属性。

这是一个例子：

  <ion-row responsive-sm>
    <ion-col width-10>This column will take 10% of space</ion-col>
  </ion-row>

【讨论】：

我希望这个答案仍然有效。我在源代码的任何地方都找不到它
Ionic 更新了他们的响应式离子网格。属性都已更改为更像 Bootstrap。 blog.ionic.io/…