Есть ли возможность привести кнопку в правильное положение на всех устройствах (универсальное решение)? - PullRequest
Новая
       27

Есть ли возможность привести кнопку в правильное положение на всех устройствах (универсальное решение)?

0 голосов
/ 30 декабря 2018

Я хочу, чтобы в центре моих вкладок была потрясающая кнопка.Так как это потрясающая кнопка, мне пришлось отрегулировать положение с помощью 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%;
}

}
...