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

问题描述 投票:0回答:3

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

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

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

Portrait

enter image description here

Landscape

enter image description here

ionic2
3个回答
0
投票

您应该编辑.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;
  }
}

0
投票

试试:

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

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


0
投票

发现了这个问题,

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列)
© www.soinside.com 2019 - 2024. All rights reserved.