Question

我想要的是适合设备屏幕的离子含量。我要减少或扩大离子含量，而不是滚动。

当前，我的页面在Chrome设备工具栏中的Iphone 5如下图所示。另一方面，由于设备的屏幕尺寸，一切对于Iphone X看起来都很完美。

我有以下 HTML ：

<ion-content padding class="card-background-page " no-bounce>
 <ion-row>
    <ion-col (click)="goPage(4)">
        <ion-card>
          <img src="assets/imgs/kid.png"/>
          <div class="card-title">Lorem Ipsum</div>
        </ion-card>
    </ion-col>
    <ion-col (click)="goPage(4)">
        <ion-card>
          <img src="assets/imgs/kid.png"/>
          <div class="card-title">Lorem Ipsum</div>
        </ion-card>
    </ion-col>
</ion-row>
<ion-row>
    <ion-col (click)="goPage(4)">
        <ion-card>
          <img src="assets/imgs/kid.png"/>
          <div class="card-title">Lorem Ipsum</div>
        </ion-card>
    </ion-col>
  <ion-col (click)="goPage(4)">
      <ion-card>
        <img src="assets/imgs/kid.png"/>
        <div class="card-title">Lorem Ipsum</div>
      </ion-card>
  </ion-col>
</ion-row>
<ion-row>
    <ion-col (click)="goPage(4)">
        <ion-card>
          <img src="assets/imgs/kid.png"/>
          <div class="card-title">Lorem Ipsum</div>
        </ion-card>
    </ion-col>
    <ion-col (click)="goPage(4)">
        <ion-card>
          <img src="assets/imgs/kid.png"/>
          <div class="card-title">Lorem Ipsum</div>
        </ion-card>
    </ion-col>
</ion-row>
</ion-content>

CSS

page-menu {
    .hr{
        border: 0;
        clear:both;
        display:block;
        width: 96%;   
        background-color:#f3f6db;
        height: 1px;
    }
    .card-background-page {
        ion-card {
          position: relative;
          text-align: center;
          background-color: transparent;
        }
        .card-title {
          top: 74%;
          font-size: 2.0em;
          width: 100%;
          color: #fff;
          font-family: auto;

        }
        .card-subtitle {
          font-size: 1.0em;
          position: absolute;
          top: 52%;
          width: 100%;
          color: #fff;
        }
      }
}

StackBlitz网址：here

您的建议或指示是什么？谢谢。

Answer 1

因此，问题在于响应速度不够快，在ionic 3应用程序中获得响应速度有些棘手，因为在该页面中，您ion-content夹有.scroll-content和{ {1}}的内部，选项卡也不会“推送”内容，离子只向内容添加了精确的边距，因此不会与页脚发生冲突。

这就是我所做的：

HTML：

.fixed-content

CSS：

<ion-content class="card-background-page">
  <div class="buttons">
    <ion-card>
      <img src="https://i.imgur.com/YpXomyN.png"/>
      <div class="card-title">Lorem Ipsum</div>
    </ion-card>
    <ion-card>
      <img src="https://i.imgur.com/YpXomyN.png"/>
      <div class="card-title">Lorem Ipsum</div>
    </ion-card>
    <ion-card>
      <img src="https://i.imgur.com/YpXomyN.png"/>
      <div class="card-title">Lorem Ipsum</div>
    </ion-card>
    <ion-card>
      <img src="https://i.imgur.com/YpXomyN.png"/>
      <div class="card-title">Lorem Ipsum</div>
    </ion-card>
    <ion-card>
      <img src="https://i.imgur.com/YpXomyN.png"/>
      <div class="card-title">Lorem Ipsum</div>
    </ion-card>
    <ion-card>
      <img src="https://i.imgur.com/YpXomyN.png"/>
      <div class="card-title">Lorem Ipsum</div>
    </ion-card>
  </div>
</ion-content>

因此，首先我从代码中删除了离子网格，而是使用CSS网格来完成这项工作。离子网格非常好，它作为自适应网格非常出色，但是您无法对其进行足够的控制，因此对于此CSS网格来说更好。

我创建了一个类为page-home { ion-content{ background: url('https://i.imgur.com/olLunTc.jpg')no-repeat fixed; background-size: cover; background-repeat: no-repeat; background-position: center; } .scroll-content { overflow-y: hidden; } .card-background-page { .buttons { display: grid; grid-template: repeat(3, 1fr) / repeat(2, 1fr); height: calc(100vh - 55px); // i've added this number of pxls, but you can inspect and get the exact amount of the tab footer } ion-card { display: flex; flex-direction: column; text-align: center; align-items: center; background-color: transparent; img { width: 80%; } .card-title { font-size: 2rem; width: 100%; color: #fff; font-family: auto; } } } }的div来容纳“菜单”，它具有计算出的高度，因此可以容纳整个内容，而无需删除制表符高度。仅此一项就可以使您的内容仅扩展到该区域。

因此，卡片将尊重CSS网格的行和列，现在的工作是使图像和文本具有响应性，使用buttons作为图像和%作为文本很容易

我已经询问了该菜单中的项目数量，因为如果菜单项超过6个，它将看起来很奇怪，您需要修改rem第一个参数中的行数。因此，如果有8个或更多项会使图像变小，并且取决于您要显示的图像，那么效果会不好，在这种情况下，我建议删除图像，您甚至可以将所有项放入数组中并使用并有条件地进行显示仅当grid-templates之类的

.TS

array.length <= 6

HTML

public menu: any[] = [{img: "url", text: "menu text"}, ...];

所以这是我想出的，对不起您的延迟，希望对您有所帮助：D

离子如何固定离子含量以填充设备屏幕尺寸

1 个答案: