我正在尝试根据以下规则调整框的宽度和高度:
- 每当调整窗口大小时，需要重新计算框的大小
- 框的高度必须是主体的高度，边距最小，但没有滚动条
- 框的宽度需要是像素高度的 1/2
- 我仅限于 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/