如何在CSS中创建调整窗体宽度的javascript脚本？
如何在CSS中创建调整窗体宽度的javascript脚本？
提问于 2018-07-11 07:19:05
基本上，我试图做的是创建一个表单，供人们输入他们的电子邮件，以获得一些信息。我想为桌面和移动视图创建一个html文件，这样当窗口较窄时窗体宽度占屏幕的75%，窗口较宽时占屏幕宽度的35%。我的脚本现在会在html文档第一次加载时创建正确大小的窗口，但是当我调整窗口大小时，它不会调整大小。我的代码哪里做错了？
<div id="center" class="container-fluid" font-size=13px; onresize="resize()">
<script>
out = "75%"
if (window.innerWidth > window.innerHeight){
out = "35%"
} else{
out = "80%"
}
document.getElementById("center").style.width = out;
document.getElementsByTagName("BODY")[0].onresize = function() {myFunction()};
function resize(){
out = "75%"
if (window.innerWidth > window.innerHeight){
out = "35%"
} else{
out = "80%"
}
document.getElementById("center").style.width = out;
}
</script>
</div>回答 2
Stack Overflow用户
发布于 2018-07-11 07:34:10
在您的CSS中添加以下内容：
.email-form {
width: 75%;
}
@media only screen and (max-width: 768px) {
.email-form {
width: 35%;
}
}Stack Overflow用户
发布于 2018-07-11 07:37:34
您需要将此代码与调整窗口大小时发生的事件挂钩。将代码放入一个函数中，然后从窗口加载和调整窗口大小事件中调用该函数，例如：
function ResizeMe(){
// code here as above
}
window.onResize = ResizeMe;
window.onload = ResizeMe;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51275146
复制相关文章
相似问题