Question

我希望将fab按钮作为选项卡的中心。由于它是晶圆厂按钮，因此我不得不使用CSS调整位置。但是现在我有一个问题，在许多设备上，按钮的实际位置不同。在某些设备上，该按钮位于中心位置，但在某些设备上，该按钮位于较高位置；在我的I Phone X上，该按钮位于较低位置，并且该按钮的图标也较小。那么是否有可能适合所有设备的通用代码库，还是我必须为每个设备调整代码？

代码： HTML：

<ion-tabs class="tabs-icon" [color]="isAndroid ? 'rank' : 'rank'">

    <ion-tab [root]="tab1Root" tabIcon="home" ></ion-tab>
    <ion-tab [root]="tab2Root" tabIcon="home" ></ion-tab>
    <ion-fab center bottom class="testo">
      <button ion-fab color="rank" style="box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.0), 0 0px 0px rgba(0, 0, 0, 0.0); margin-bottom: 30%"><ion-icon name="add"></ion-icon></button>
      <ion-fab-list side="top" style="margin-left: 70%">
        <button ion-fab (click)="getPhoto()" color="rank"><ion-icon name="images"></ion-icon></button>
      </ion-fab-list>
      <ion-fab-list side="top" style="margin-left: -70%">
        <button ion-fab (click)="openCamera()" color="rank"><ion-icon name="camera"></ion-icon></button>
      </ion-fab-list>
  </ion-fab>
    <ion-tab [root]="tab3Root" tabIcon="empty" ></ion-tab>
    <ion-tab [root]="tab4Root" tabIcon="home" ></ion-tab>
    <ion-tab [root]="tab5Root" tabIcon="home" ></ion-tab>
  </ion-tabs>

CSS：

page-tabs {
.fab-ios {
  margin-bottom: 0% !important;
  background-color: "rank";

}
.testo {
  bottom: 0%;
}
.fab-md{
  margin-bottom: 0% !important;
  bottom: 0%;
}

}

是否有可能将按钮在所有设备上都正确定位（通用解决方案）？

0 个答案: