html - 根据浏览器高度调整填充值

Question

我正在寻找一种方法来根据浏览器窗口的高度(而不是宽度)调整按钮元素的填充值。 padding 的值应该根据浏览器窗口的高度进行调整。有什么方法可以用 CSS 实现吗？

.btn {
  padding: 4%;
}

<div class="position">
  <button class="btn bg-primary btn-lg">PLAY</button>
  <br>
  <br>
  <button class="btn bg-primary btn-lg">SIGN IN</button>
  <br>
  <br>
  <button class="btn btn-lg bg-primary">SETTINGS</button>
  <br>
  <br>
  <button class="btn bg-primary btn-lg">ABOUT</button>
  <br>
  <br>
</div>

Answer 1

您可以使用 vh 视口(viewport)高度 单位来实现，其中 1vh 代表 1/100th 视口(viewport)高度:

.btn {
  padding: 5vh 10vh;
}

<div class="position">
  <button class="btn bg-primary btn-lg">PLAY</button>
  <br>
  <br>
  <button class="btn bg-primary btn-lg">SIGN IN</button>
  <br>
  <br>
  <button class="btn btn-lg bg-primary">SETTINGS</button>
  <br>
  <br>
  <button class="btn bg-primary btn-lg">ABOUT</button>
  <br>
  <br>
</div>