javascript - 每当更改窗口尺寸时如何更改 div 尺寸？

Question

我正在尝试制作一个有趣的井字游戏，每当我缩小窗口时，div 将保持其高度和宽度(我尝试使用 vh 和 vw，但在 Javascript 中操作起来太难了), 使 div 落到井字棋盘的下一行。因此，每当使用 javascript 函数调整窗口大小时，我都尝试操纵高度。这是 div 的其余代码。你能告诉我如何改进代码或使其实际工作吗？

function dimensions() {
  var textHeight = (window.innerHeight * .3333333);
  var textWidth = (window.innerWidth * .32);

  if ((textHeight != window.innerHeight) || (textWidth != window.innerWidth)) {

    document.getElementById("oMark").style.height = textHeight + "px";
    document.getElementById("oMark").style.width = textWidth + "px";
  }
}

dimensions._intervalId = setInterval(dimensions, 1);

.O {
  clear: none;
  margin: 0;
  height: 239.999px;
  display: block;
  width: 485.849px;
  background-color: lightblue;
  font-size: 30px;
  border: 5px solid black;
  text-align: center;
  vertical-align: middle;
  overflow: none;
  float: left;
}
.O:hover {
  background-color: blue;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
}

<div id="oMark" class="O">
  O
</div>

Answer 1

对div 的width 和height 使用百分比，这样您的div 的大小将是流动的而不是固定的，并且会均匀地填充窗口。