卡片高度响应每个屏幕

Question

我有一个离子卡，里面有几个选项（选项的数量是动态的），我希望它能够根据选项和屏幕尺寸做出响应。我已经使用 max-height 实现了它，它适用于移动设备和桌面设备，但是当我将它连接到不同尺寸（2000 像素等）的显示器时，它没有响应。

 <ion-card class="inputOptions">
    <ion-card-content class="wrapper">
      <div
        class="radio-list"
        mode="md"
        *ngFor="let option of data"
      >
        <ion-radio
          value="{{ option }}"
          (click)="Selected(option)"
          mode="md"
          [checked]="option === value"
          style="cursor:pointer;"
        >
        </ion-radio>
        <ion-label
          type="radio"
          style="cursor:pointer;"
          (click)="Selected(option)"
          class="choice"
          >{{ option }}</ion-label
        >
      </div>
    </ion-card-content>
  </ion-card>


.wrapper {
  height: auto;
  padding: 5px 10px;
  max-height: 100%;
  margin-left: -12px;
  margin-top: -8px;
  margin-bottom: -8px;
  overflow: auto;
}

ion-card {
  border: none;
  margin: 0;
  height: auto;
  padding: 5px 10px;
  border-radius: 8px;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.2);
  font-size: 12px;
  .radio-list {
    --min-height: 20px;
    margin: 8px 0;
    position: relative;
    padding-left: 25px;
    ion-radio {
      width: 20px;
      height: 20px;
      background-color: var(--white);
      margin-right: 8px;
      position: absolute;
      left: 0;
      top: 2px;
    }
    ion-label {
      width: 448px;
      font-size: 16px;
      line-height: 1.25;
      color: #191919;
      vertical-align: bottom;
    }
  }
}



@media only screen and (max-width: 375px) {
  .wrapper {
    max-height: 140px;
  }
}

Answer 1

试试：

@media only screen and (max-width:6000px) {
   .wrapper {
    max-height: 140px;
  }
}