时间戳

首页 > 解决方案 > “调整大小”窗口事件似乎只在垂直调整大小时触发

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

问题描述

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

  1. 每当调整窗口大小时，都需要重新计算框大小
  2. 盒子需要是身体的高度，有最小的边距，但没有滚动条
  3. 框的宽度必须是像素高的 1/2
  4. 我仅限于 HTML5、CSS3 和 vanilla 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>

标签： javascripthtmlcss

解决方案

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

例如：

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

推荐阅读