gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 14:34:19 26 4
gpt4 key购买 nike

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

  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>

最佳答案

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

例如:

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

关于javascript - “调整大小”窗口事件似乎只在垂直调整大小时触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53725600/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com