Question

我正在尝试根据以下规则调整盒子的宽度和高度：

每当调整窗口大小时，都需要重新计算框的大小
该框必须是具有最小边距但没有滚动条的身体高度
该框的宽度必须是其高像素的1/2
我只能使用HTML5，CSS3和香草JS（无jQuery）

我认为我有一个很好的工作模型，除了有点烦人之外，它可以工作。水平调整浏览器的大小只会在一次启动resizeWindow（）时触发一次。触发第一个水平调整大小后，没有任何水平调整大小会触发对框文本的更新。在垂直方向上调整窗口大小可以达到预期的效果。

我希望看到文本更新（通过resizeWindow（）调用），即使不必更改框的大小。

该片段仅在全页模式下有效：/

function resizeWindow() {
  ht = window.innerHeight;
  wd = window.innerWidth;
  elPreview = document.getElementById("preview");
  elPreview.style.height = "98.5vh";
  elPreview.style.width = (ht / 2) + "px";
  elPreviewText = document.querySelector("#preview p");
  elPreviewText.textContent = "Width: " + (ht / 2) + ", Height: " + ht;
}

window.addEventListener('resize', resizeWindow, true);

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.box {
  background-color: black;
  border-radius: 20px;
  color: white;
  padding: 5px 0;
  font-size: 1em;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index_proto.css">
</head>
<body>
  <div class="box" id="preview">
    <p>Preview</p>
  </div>
  <script src="index_proto.js"></script>
</body>
</html>

Answer 1

您始终可以使用css @media来更改元素的宽度和高度。

例如：

@media only screen and (max-width: 720px) {
    .DivElementClassName {
        width: 300px;
        margin-left:25%;
    }
}

Answer 2

function resizeWindow() {
  ht = window.innerHeight;
  wd = window.innerWidth;
  elPreview = document.getElementById("preview");
  elPreview.style.height = "98.5vh";
  elPreview.style.width = (ht / 2) + "px";
  elPreviewText = document.querySelector("#preview p");
  elPreviewText.textContent = "Width: " + wd + ", Height: " + ht;
}

window.addEventListener('resize', resizeWindow, true);

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.box {
  background-color: black;
  border-radius: 20px;
  color: white;
  padding: 5px 0;
  font-size: 1em;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index_proto.css">
</head>
<body>
  <div class="box" id="preview">
    <p>Preview</p>
  </div>
  <script src="index_proto.js"></script>
</body>
</html>

正如我上面所说，请忽略。一位程序员（我）的一个嘲笑者正在把一个永远不会改变的数字变成他期望改变的输出。

“调整大小”窗口事件似乎仅在垂直调整大小时触发

2 个答案: