我知道如何使用网格:https://ionicframework.com/docs/theming/responsive-grid/
但我不明白的是如何构建它 - 景观与肖像?
我正在寻找一种方法来做到这一点,但col-[xs|sm|md]
没有任何影响(仅限于它有影响的设备 - 即:手机与平板电脑)
您应该编辑.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
例如:
但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>