如何根据 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 的东西。