我有一个登录表单，徽标在它的顶部，整个表单位于屏幕的中心。一切都很完美，但当我在小显示屏上尝试时，这个表单不垂直，徽标被裁剪，我无法在顶部滚动。
这里有一个简单的例子：
.login-form {
width: 250px;
background-color: #eee;
padding: 20px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.logo {
width: 100%;
}
.img-container {
margin-bottom: 20px;
}
.form-container {
text-align: center;
}
.button {
width: 80px;
}
input {
width: 200px;
margin-bottom: 10px;
}<div class="login-form">
<div class="img-container">
<img src="https://pmcdeadline2.files.wordpress.com/2016/07/logo-tv-logo.png" alt="logo" class="logo">
</div>
<form class="form-container">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button>Login</button>
</form>
</div>我试着用flex定位登录表单，而不是转换-翻译，但结果是一样的。有人能帮我解决这个问题吗？谢谢你的建议。
尝试用于小屏幕(使用媒体查询)：
@media screen and (max-width: 768px) {
.login-form {
top: 0;
transform: translate(-50%, 0%);
}
}
请将"768px"替换为所需的屏幕宽度。
如果你想防止垂直滚动，那么只有这个答案对你有用：我只添加了下面的2个类：
/* You can Change the width of small device screen you expected */
@media screen and (max-width: 480px){
.logo {
width: auto;
max-height: 30vh;/*Adjust it as per your logo size*/
min-width: 15vw; /*Adjust it as per your logo size*/
}
.img-container {
margin-bottom: 20px;
text-align:center;
}
.login-form {
width: 250px;
background-color: #eee;
padding: 20px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.logo {
width: 100%;
max-height:
}
.img-container {
margin-bottom: 20px;
text-align:center;
}
.form-container {
text-align: center;
}
.button {
width: 80px;
}
input {
width: 200px;
margin-bottom: 10px;
}
/* You can Change the width of small device screen you expected */
@media screen and (max-width: 480px){
.logo {
width: auto;
max-height: 30vh;
min-width: 15vw;
}
}
<div class="login-form">
<div class="img-container">
<img src="https://pmcdeadline2.files.wordpress.com/2016/07/logo-tv-logo.png" alt="logo" class="logo">
</div>
<form class="form-container">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button>Login</button>
</form>
</div>
我最终找到了使用flex的解决方案。这个问题是由转换规则引起的。
html, body {
height: 100%;
}
.centered-box {
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.login-form {
width: 250px;
background-color: #eee;
padding: 20px;
}
.logo {
width: 100%;
}
.img-container {
margin-bottom: 20px;
}
.form-container {
text-align: center;
}
.button {
width: 80px;
}
input {
width: 200px;
margin-bottom: 10px;
}<div class="centered-box">
<div class="login-form">
<div class="img-container">
<img src="https://pmcdeadline2.files.wordpress.com/2016/07/logo-tv-logo.png" alt="logo" class="logo">
</div>
<form class="form-container">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button>Login</button>
</form>
</div>
</div>