离子2响应网格

Question

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

在我的情况下，我有一个<ion-col>，其中有三个bundle update。当显示宽度低于阈值时，我希望列相互下降。用Ionic 2可以做到这一点吗？

Answer 1

虽然它目前似乎没有出现在Ionic 2文档中，但Ionic 1中的responsive-sm， <ion-row responsive-sm> <ion-col width-10>This column will take 10% of space</ion-col> </ion-row> （等）类现在成为Ionic 2中的个别属性。

以下是一个例子：

$conn = new PDO('mysql:host=localhost;dbname=tabela_nome','user','pass');

try{
    $select= "SELECT * from user_ WHERE email=:'email@email.com'";
    $result = $conn->prepare($select);
    $result->execute();
} catch(PDOException $e){       
   echo $e->getMessage();
}

Answer 2

现在Ionic正在使用Bootstrap grid system。我们还可以在离子网格上使用固定属性来更好地利用屏幕宽度。

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

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

$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的惊人网格系统。您可以在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>