Ionic 2 响应式网格

Question

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

在我的例子中，我有一个 <ion-row> 和三个 <ion-col>。当显示宽度低于阈值时，我希望列彼此下降。可以用 Ionic 2 做到这一点吗？

Answer 1

虽然它目前似乎没有出现在 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>

Answer 2

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

我尝试使用以下代码来满足我的要求。请关注评论了解。

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

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

以上设备的输出如下：

Answer 3

Ionic 2、Ionic 3+ 更新：

Ionic 现在有一个基于 flexbox css. You can see in the 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>

Ionic 2 响应式网格

Ionic 2 responsive grid

ionic-framework

ionic2

Ionic 2、Ionic 3+ 更新：