如何在Ionic 3中实现基于屏幕方向的响应式网格（避免代码重复）

你之前用showWhen实现的方式确实会导致ion-col代码重复，每次修改内容都要同步改两处，太麻烦了。这里有两个更简洁的方案，帮你搞定这个问题：

方案一：Flexbox + 方向媒体查询（推荐） #

Ionic的网格系统本身就是基于Flexbox的，我们可以直接用CSS媒体查询针对屏幕方向来调整列的宽度，完全不用重复写ion-col标签。

实现代码 #

模板部分：每个内容块只需要一个ion-col，给它加个自定义类名：

<ion-grid>
  <ion-row>
    <ion-col class="direction-aware-col">...[content_1]...</ion-col>
    <ion-col class="direction-aware-col">...[content_2]...</ion-col>
    <!-- 更多内容块直接复制上面的ion-col即可 -->
  </ion-row>
</ion-grid>

CSS部分：通过媒体查询区分竖屏/横屏，设置列的宽度：

/* 默认竖屏状态：占满整行 */
.direction-aware-col {
  flex: 0 0 100%;
  max-width: 100%;
}

/* 横屏状态：每行两列 */
@media (orientation: landscape) {
  .direction-aware-col {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

这个方案的好处是：代码极简，没有任何重复，而且性能更好——浏览器不需要渲染两个ion-col，只是切换样式而已，完全符合你“尽可能不使用媒体查询”的需求（其实只写了一次媒体查询，比showWhen背后的实现更轻量）。

方案二：内容封装成自定义组件（适合复杂内容） #

如果你的内容块逻辑比较复杂，不想写媒体查询，也可以把内容封装成自定义组件，这样即使ion-col标签重复，内容部分只需要维护一份：

步骤1：创建自定义组件 #

比如生成一个content-block组件，把内容逻辑放在里面：

// content-block.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'content-block',
  template: `<div>...[你的内容模板]...</div>`
})
export class ContentBlockComponent {
  @Input() data: any; // 如果需要动态传数据
}

步骤2：在页面中使用 #

<ion-grid>
  <ion-row>
    <ion-col showWhen="portrait" col-12>
      <content-block [data]="content1"></content-block>
    </ion-col>
    <ion-col showWhen="landscape" col-6>
      <content-block [data]="content1"></content-block>
    </ion-col>

    <ion-col showWhen="portrait" col-12>
      <content-block [data]="content2"></content-block>
    </ion-col>
    <ion-col showWhen="landscape" col-6>
      <content-block [data]="content2"></content-block>
    </ion-col>
  </ion-row>
</ion-grid>

这样修改内容时只需要改content-block组件的模板，不用在多个ion-col里重复修改，也能减少维护成本。

总结 #

如果内容比较简单，方案一绝对是最优解——代码最少、无重复、性能好；如果内容复杂，方案二可以帮你把重复的内容逻辑抽离出来，避免冗余。

内容的提问来源于stack exchange，提问作者Eng