每当更改窗口尺寸时如何更改 div 尺寸？答案

【问题标题】：How to change div dimensions whenever window dimensions are changed?每当更改窗口尺寸时如何更改 div 尺寸？
【发布时间】：2017-03-15 05:44:31
【问题描述】：

我正在尝试制作一个有趣的井字游戏，每当我缩小窗口时，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>

【问题讨论】：

“难以在 Javascript 中操作”是什么意思？

标签： javascript html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

您已经正确地概述了在窗口大小发生变化时更改 div 大小的两个选项——一个选项是使用 CSS 处理它，另一个选项是使用 Javascript 处理它。

如果您的用例很简单，那么您可能会摆脱 CSS 的影响——而不是硬编码宽度和高度，而是使用相对单位（如百分比）设置它们的尺寸——这简单、高效且快速。

.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;
}

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

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

如果您发现某些用例无法单独使用 CSS，则另一种选择是使用 Javascript。现在，在上面您已经编写了一个脚本，您尝试在其中进行一些调整大小，但是您尝试完成它的方式——通过设置每毫秒重复的间隔，是噩梦般的。你最好利用resize DOM 事件。如何做到这一点的一个非常基本的例子是：

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

window.addEventListener('resize', sayHello);

上面的 MDN 链接显示了优化原生 resize 事件的方法，使其更高效。

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

<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>

至于你的 Javascript 的其余部分试图完成什么，我只能推测——但上面的内容让它在调整大小时触发并执行，而不会因错误而中断。

【讨论】：