如何根據 Angular/Ionic 中的屏幕尺寸使 CSS/HTML 邊距響應

Question

我認為有兩種方法可以解決我的問題，但這只是其中一種。 我有這個代碼：

<ion-row style="height: 28%" class="first_row">
  <ion-col size="12" style="height: 100%" class="ion-text-center">
    <div>
      <img src="assets/img/picture.png" class="picture"/>
    </div>
  </ion-col>
</ion-row>

CSS：

.picture {   object-fit: fill;   width: 45%;   border-radius: 5px;   margin-top: 10%; }

這段代碼的作用是將行高設置為 28%，我用顏色填充。 然后我在行的頂部有一張圖片，我從屏幕頂部設置了一個邊距。 所以它看起來像這樣：

我的困境是它在 iphone6/7/8 屏幕上看起來很棒，但是當我轉到 Iphone X 屏幕時，它看起來像這樣：

我知道必須有更好的方式來響應，但我不完全確定如何。 因為我希望代碼在較小的設備上和較大的設備上看起來完全一樣。 這就是為什么我不知道是否需要根據屏幕大小（我不知道如何更改）更改邊距，或根據屏幕大小更改行高。 如果您知道，請隨時提供幫助。

Answer 1

您可以為此使用 css 媒體查詢或類似 bootstrap 的東西。