带高度的媒体查询答案

【问题标题】：Media Query with Height带高度的媒体查询
【发布时间】：2018-01-25 03:26:26
【问题描述】：

情况：我有一个图像和图像下方的两个按钮，它们的宽度都相同。

问题：如果视口在水平方向上太长，则不向下滚动就看不到按钮。这是平板电脑和小型笔记本电脑的问题。我当前的 CSS 如下所示：

 .image{
        width:90%;
        height: 50%;
        max-width: 500px;
        max-height: 250px;
        margin-bottom: 10px;
    }


    .buttonAnswer{
        width: 90%;
        max-width: 500px;
        font-size: 25px;

我正在尝试找到一种方法，使用媒体查询或其他方式将按钮和图像缩小到您无需在任何尺寸的设备上滚动即可看到两者的大小。

很难举一个问题的例子。查看下方，然后将视口缩小到窄高和长宽，您应该看到您只能看到图像并且必须滚动才能查看按钮。

  .image {
  width: 90%;
  height: 50%;
  max-width: 500px;
  max-height: 250px;
  margin-bottom: 10px;
}

.buttonAnswer {
  width: 90%;
  max-width: 500px;
  font-size: 25px;

<img class='image center-block' id='image2' src='https://i.imgur.com/AMTXZ2R.jpg' alt="Girl trying to get a job">
<button id='stepOneYes2' type="button" class='buttonsQuestion2 btn btn-info center-block buttonAnswer buttonSpace'> Yes </button>
<button id='stepOneNo2' type="button" class='buttonsQuestion2 btn btn-info center-block buttonAnswer'> No </button>

【问题讨论】：

页面上只有图像和按钮吗？或者还会有别的吗？有很多方法可以解决这个问题，可以使用带有高度的媒体查询，或者使用带有高度属性的vh 单位。

标签： javascript jquery html css media-queries

【解决方案1】：

使用max-height: 50vh，这意味着它将占据任何屏幕的 50%。

@media (min-width: 970px) {
  .outer {
    height: 100%;
    min-width: 100%;
  }
  .image {
    max-width: 100%;
    height: auto;
    max-height: 50vh;
  }
  .buttonAnswer {
    width: 90%;
    font-size: 25px;
  }
}

@media (max-width: 970px) {
  .outer {
    height: 100%;
    min-width: 100%;
  }
  .image {
    width: 90%;
    height: auto;
    max-height: 50vh;
  }
  .buttonAnswer {
    width: 90%;
    font-size: 25px;
  }
}

<div class="outer">
  <p style="text-align:center"><img class='image center-block' id='image2' src='https://i.imgur.com/AMTXZ2R.jpg' alt="Girl trying to get a job"></p>
  <button id='stepOneYes2' type="button" class='buttonsQuestion2 btn btn-info center-block buttonAnswer buttonSpace'> Yes </button>
  <button id='stepOneNo2' type="button" class='buttonsQuestion2 btn btn-info center-block buttonAnswer'> No </button>
</div>

【讨论】：

【解决方案2】：

我认为使用媒体查询是解决问题的正确方法。您需要为关键视口上的图像定义另一个图像尺寸（尤其是最大宽度）。

但您也可以使用视口单位来定义图像的大小。现在你已经设置了一个固定的最大宽度，但这并没有考虑视口的大小。您可以将其设置为视口高度的 50% 并相应地更改其他值：

 .image{
        max-height: 50vh;
    }

您也可以将这两种解决方案结合起来。

【讨论】：