如何根据 Angular/Ionic 中的屏幕尺寸使 CSS/HTML 边距响应

Question

There are two ways, I think, to go about my issue but this is just one of them. I have this code:

<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%; }

What this code does is set a row height of 28%, that I fill with a color. I then have a picture on top of the row with a margin that I set from the top of the screen. So it looks something like this:

My Dilema is that it looks great on an iphone6/7/8 Screen, but when I go to Iphone X screen, it looks like this:

I know there has to be a better way to be responsive, but I'm not entirely sure how. Because I want the code to look exactly how it looks on a smaller device, on a bigger device. That's why I don't know if I need to change the margins based on screen size (which I don't know how), or change the row height based on screen size. If you might know, please feel free to help.

Answer 1

您可以为此使用 css 媒体查询或类似 bootstrap 的东西。