gpt4 book ai didi

html - 垂直缩放浏览器窗口时 CSS Resizing 失败

转载 作者:行者123 更新时间:2023-11-28 15:33:42 25 4
gpt4 key购买 nike

我正在尝试创建一个简单的登录页面,在前段时间学习了 CSS3 flexbox 之后,我使用这个新概念重新设计了该页面。所以现在,我的页面看起来像这样:

enter image description here

这就是我想要的...直到我尝试调整浏览器的大小。然后,我得到了这个(当我只是降低浏览器窗口的高度而不降低宽度时):

enter image description here

还有这个(当我将浏览器窗口的高度和宽度都降低到最小值时):

enter image description here

这让我感到困惑,因为我阅读了其他 stackoverflow 的答案,我不需要媒体查询来创建响应式网页设计(我打算稍后做),而只是通过指定最大宽度的 CSS在百分比方面。

这是我的代码:

HTML:

<div class="center">
<!-- Logo -->
<img id="logo" src="assets/logowshadow.png" alt="cueclick logo">

<!-- Login element -->
<form class="login" action="/action_page.js" method="post">
<p>Enter <i>your</i> secret key</p>
<div id="password">
<img id ="eye" src="assets/eye2.png" alt="eye">
<input type="password" name="secret-key" placeholder="ilovecueclick" autofocus autocomplete="off"/>
</div>
</form>
</div>

CSS:

/* -- Background image -- */
body {
background-image: url(assets/wood.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}

/* -- Center element -- */
.center {
max-width: 60%;
max-height: 80%;
width: 30%;
height: 40%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 15%;
box-shadow: 2px 2px 4px 3px #505050;
position: absolute;
z-index: 1;
}

/* -- Logo style -- */
#logo {
position: relative;
z-index: 2;
max-width: 100%;
height: auto;
}

/* -- Form styles -- */
form.login {
max-width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
}

#password {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 5%;
}

/* -- Show password -- */
#eye {
height: auto;
max-width: 15%;
margin-right: 3%;
}

/* -- Login element -- */
form.login p {
font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
font-size: 2vw;
max-width: 100%;
height: auto;
line-height: 2%;
}

form.login input[type=password] {
max-width: 100%;
width: 100%;
height: auto;
}

进一步解释这段代码的作用:- body 有一个全尺寸的背景图像,可以随浏览器窗口缩放- 'center' 本质上是背景上方的半透明白色矩形- Logo 和表单登录元素与白色矩形重叠

我还为它们的 flex 元素创建了三个 flex 容器(以处理居中的麻烦问题):1)body是flex容器,flex item是中心元素2)center为flex容器,logo和表单输入部分(即段落+眼睛+输入框)为flex项3) 'password' div 是 flex 容器(内联),眼睛和登录字段是 flex 元素

我真的不确定问题出在哪里,因为目前的代码似乎实现了一些扩展......

完整的 HTML 可以在这里找到:https://pastebin.com/6tS6SXi3 ,完整的 CSS 可以在这里找到:https://pastebin.com/6M11HnJE

提前致谢!

编辑:

进一步试验后,事实证明我只需要让中心类的高度自动...

因为它的简单性而接受了答案,即使它没有像我希望的那样使用 flex-box

最佳答案

使用 HTML 和 CSS 构建您的表单包装器,而不是使用图像,这在屏幕尺寸变化时很难控制。

样本: https://codepen.io/anon/pen/NgPGoQ

.login {
width: 300px;
}

@media screen and (max-width: 768px) {
.login {
width: 80%;
}
}

为包装器设置默认宽度,并为您想要自定义宽度的屏幕尺寸添加媒体查询。

关于html - 垂直缩放浏览器窗口时 CSS Resizing 失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44356026/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com