Question

我正在尝试制作一个有趣的井字游戏，每当我收缩窗口时，div都会保持其高度和宽度（我尝试使用vh和vw，但是在Javascript中操作起来太难了），使div下降到tic tac toe board的下一行。因此，每当使用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

使用width的{{1}}和height的百分比，这样div的尺寸将是流动的而不是固定的，并将均匀地填充窗口

Answer 2

您已正确概述了在窗口大小更改时更改div大小的两个选项 - 一个选项是使用CSS处理它，其他选项是使用Javascript处理它。

如果您的用例很简单，那么您可以使用CSS - 而不是硬编码宽度和高度，使用相对单位（如百分比）对其尺寸进行样式设置 - 这很简单，高效且快速。

＆＃13;

.O {
    clear: none;
    margin: 0;
    height: 50vh;
    display: block;
    width: 90vw;
    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;
}

＆＃13;

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

＆＃13;

还可以使用media queries扩充CSS选项，以便在不同的视口大小下进行更精细的控制。

另一个选项，如果你发现一些单独的CSS无法容纳的用例，就是使用Javascript。现在，在上面你已经写了一个脚本，你试图做一些调整大小，但你试图完成它的方式 - 通过设置一个重复每一毫秒的间隔，是噩梦。你最好利用resize DOM事件。如何执行此操作的一个非常基本的示例是：

function sayHello () {
    console.log('hello!');
}

window.addEventListener('resize', sayHello);

上面的MDN链接显示了优化原生resize事件的方法，以便提高效率。

我冒昧地更改了下面的代码以利用resize事件，并修复了if条件中缺少的关闭代码：

＆＃13;

<div id = "oMark" class = "O">
                O
                
                <script>
                    
                    function dimensions() {
                        var textHeight = (window.innerHeight*0.3333333);
                        var textWidth = (window.innerWidth*0.32);
                        
                        if ((textHeight != window.innerHeight) || (textWidth != window.innerWidth)) {
                            
                            document.getElementById("oMark").style.height = textHeight+"px";
                            document.getElementById("oMark").style.width = textWidth+"px";
                        }
                    }
                    window.addEventListener('resize', dimensions);
                    
                </script>
                <style>
                    .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;
                    }
                </style>
</div>

＆＃13;

至于你的其他Javascript试图完成什么，我只能推测 - 但是上面的内容会在调整大小时触发并执行而不会出现错误。

如何更改窗口尺寸时如何更改div尺寸？

2 个答案: