调整浏览器大小时如何防止HTML元素移动？

debugcn 发表于 Dev

胡安·GD

我正在创建一个HTML页面，但是有一个大问题：调整浏览器的大小。调整浏览器大小时，网页中的元素会从您的位置移开。我的HTML代码是下一个：

<body>
<div class="wrap">
    <div class="header">
        <form class="form">
            <label>E-mail </label><input >
            <label>Password </label><input >
        </form>
    </div>
</div>

接下来是我的CSS代码：

.wrap{width:100%;}
.header{background-color:#046b5b; width: 100%; height: 5em;}
.form{position:relative; top:50%; float: right;}

我该怎么办？

佛教野兽

我想以一种快速的补充方式来解决此问题，同时还使您的网站保持响应速度。这是代码：

的HTML

<div class="wrap">
    <div class="header">
        <form class="form">
            <label class="entry"> <span>E-mail</span>
                <input placeholder="Email Address" />
            </label>
            <label class="entry"> <span>Password</span>

                <input placeholder="Password" />
            </label>
        </form>
    </div>
</div>

的CSS

.wrap {
    width:100%;
}
.header {
    background-color:#046b5b;
    width: 100%;
    height: 5em;
    min-width: 200px;
}
.form {
    position:relative;
    display:inline-block;
    top:50%;
    float: right;
}
.entry {
    display:inline-block;
}

@media screen and (max-width: 460px) {
    span {
        display:none;
    }
    form {
        text-align:center;
        margin: 0 auto;
    }
    .header {
        height:7em;
    }
}

结论

如您所见，我在您的HTML中做了一些更改，但这一点都不琐碎。我添加了一个占位符，用于当浏览器变小时，用户仍然确切知道要在输入字段中放置什么，而不必在此处放置标签以使输入对齐。

我添加了一个CSS媒体查询，以检查屏幕尺寸何时达到特定点，在本示例中，我仅使用460像素，但您始终可以根据需要进行调整。基本上，如果用户达到该屏幕尺寸，它将激活该块中的所有CSS。对于这个问题，我用它来隐藏标签文本，加长包装纸的高度以避免高度不一致，同时还将输入字段彼此对齐。

边注

我决定添加所有这些效果，因为在现实中，您将希望使您的网站尽可能移动友好，而又不破坏网站的真正美感。如果您不喜欢它，那没关系，但是请记住，响应式网站的确很棒。它表明您已经适应了所有屏幕尺寸以及可能的所有潜在浏览器。

另外，请注意，我min-width在您的代码中添加了，因此当您调整JSFiddle窗口的大小时，您仍然可以在提供的最小宽度上滚动。

演示JSFiddle

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-8

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章