如何区分横向和纵向之间的网格

Posted 2021-04-21

我知道如何使用网格：https://ionicframework.com/docs/theming/responsive-grid/

但我不明白的是如何构建它 - 景观与肖像？

我正在寻找一种方法来做到这一点，但col-[xs|sm|md]没有任何影响（仅限于它有影响的设备 - 即：手机与平板电脑）

Portrait

Landscape

答案

您应该编辑.scss并使用css媒体查询来获得您想要的内容。

如果您想将此应用于整个应用程序，您可以编辑app.scss，否则您可以编辑your-page.scss文件。

@media (orientation: landscape) {
  .col {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
  }
}

此外，你可能会读到这个https://developer.mozilla.org/id/docs/Web/Guide/CSS/Media_queries

已编辑如果您的列是动态的，则无法自动完成，您需要将类添加到离子列，例如

<ion-col class="col-class-1">This text 1</ion-col>
<ion-col class="col-class-2">This text 2</ion-col>

并编辑你的scss

@media (orientation: landscape) {
  .col.col-class-1 {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
  }
  .col.col-class-2 {
    flex: 0 0 100px;
    width: 100px;
    max-width: 100px;
  }
}

另一答案

试试：

<div class="row responsive-sm">
    <div class="col">.col</div>
    <div class="col">.col</div>        
</div>

文档：https://ionicframework.com/docs/v1/components/#grid-responsive

另一答案

发现了这个问题，

Ionic 2的规则网格确实转换了这个，但事实是iPhone 5例如：

• 风景，W：568px，H：320px
• 肖像，W：320px，H：568px

但Ionic 2的默认值是：

xs  0
sm  576px    <= Landscape width (568px) still less than that

所以我编辑了文件：variables.scss

$grid-breakpoints: (
  xs: 0,
  sm: 420px,     <= Lowered the value
  md: 768px,
  lg: 1024px
);

这使得网格中的列开箱即用

<ion-grid>
    <ion-row>
        <ion-col col-12 col-sm-6 *ngFor="let card of cards">
          Card X
        </ion-col>
    </ion-row>
</ion-grid>

• 肖像：将在“行”中显示单张卡片（堆叠卡片，col-12）
• 风景：将在“行”中显示两张牌（12 / col-6 =连续2列）