“调整大小”窗口事件似乎只会在垂直调整大小时触发。
“调整大小”窗口事件似乎只会在垂直调整大小时触发。
提问于 2018-12-11 05:54:48
我正试图根据以下规则调整方框的宽度和高度：
- 无论何时调整窗口的大小，都需要重新计算该框的大小。
- 盒子需要的是身体的高度，有一点点的边缘，但没有滚动条。
- 这个盒子需要像高像素一样宽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>
回答 2
Stack Overflow用户
发布于 2018-12-11 05:58:35
您可以始终使用css @media来更改元素的宽度和高度。
例如：
@media only screen and (max-width: 720px) {
.DivElementClassName {
width: 300px;
margin-left:25%;
}
}Stack Overflow用户
发布于 2018-12-11 08:05:01
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>
正如我前面所说，请不要理会。一个程序员(我)的一个笑柄正在把一个永远不会改变的数字放到他期望改变的输出中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53725600
复制相关文章
点击加载更多
相似问题
jquery调整大小仅在调整窗口大小时触发
jQuery:仅当调整窗口大小时触发事件
调整窗口大小时重新触发
当用户调整窗口大小时垂直调整NSTextField大小
只调整垂直大小的HTA窗口
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
