基本上,我试图做的是创建一个表单,供人们输入他们的电子邮件,以获得一些信息。我想为桌面和移动视图创建一个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>
发布于 2018-07-11 07:34:10
在您的CSS中添加以下内容:
.email-form {
width: 75%;
}
@media only screen and (max-width: 768px) {
.email-form {
width: 35%;
}
}
发布于 2018-07-11 07:37:34
您需要将此代码与调整窗口大小时发生的事件挂钩。将代码放入一个函数中,然后从窗口加载和调整窗口大小事件中调用该函数,例如:
function ResizeMe(){
// code here as above
}
window.onResize = ResizeMe;
window.onload = ResizeMe;
https://stackoverflow.com/questions/51275146
复制相似问题