使用Flexbox响应登录表单 [英] Make login form responsive with Flexbox
本文介绍了使用Flexbox响应登录表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个简单的登录表单，试图在所有屏幕尺寸上看起来都不错.我被困在我的代码中，这些标签需要放置在输入字段的上方.同样，当您尝试调整屏幕窗体的大小时，Firefox窗体中的行为也很奇怪，完全被搞砸了.下面是我的代码
I have a simple login form that am trying to make nice looking on all screen sizes. I am stuck in my code, with these labels that need to be position above the input field. Also when you try to resize the screen form behavior is very strange in the Firefox form are completely messed up. Below is my code
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
html,
body {
height: 100%;
}
* {
margin: 0;
padding: 0;
text-decoration: none;
font-family: 'Roboto', sans-serif;
box-sizing: border-box
}
body {
background-color: #f9fbff
}
.source-image {
width: 100%;
background-repeat: no-repeat;
background-size: auto;
position: fixed;
max-width: 100%;
display: block
}
#login-form {
width: 500px;
background: 0 0;
padding: 80px 40px;
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
margin: 20px 0
}
.input_img {
position: absolute;
bottom: 20px;
left: 13px;
height: 30px
}
#login-form h1 {
text-align: center;
margin-bottom: 60px;
color: #191c3c;
font-size: 30px
}
.logoHolder {
display: flex;
place-content: space-around space-between;
}
.logoHolder>img {
margin-bottom: 12px;
margin-left: auto;
margin-right: auto;
display: block
}
#login-form p {
font-size: 16px;
color: #333
}
#login-form p a {
color: #191c3c;
text-decoration: underline;
font-weight: 700;
}
#login-form p {
font-size: 16px;
color: #333
}
#login-form .entryText {
font-size: 15px;
text-align: center;
}
#login-form p a:focus {
border: 1px solid #515772
}
#login-form label {
color: #4a4d67;
font-weight: 700;
margin-bottom: 10px !important
}
.input-box {
position: relative;
margin: 30px 0
}
.input-box input {
font-size: 15px;
color: #333;
border: 1px solid #51577245;
width: 100%;
line-height: 1.2;
font-size: 18px;
outline: 0;
background: #fff;
padding: 0 5px;
height: 72px;
border-radius: 5px;
padding-left: 57px;
box-shadow: 0 3px 11px 0 rgba(81, 87, 114, .2);
margin-top: 15px
}
.input-box input:focus {
border: 1px solid #515772
}
.input-box span::before {
content: attr(data-placeholder);
position: absolute;
top: 50%;
left: 5px;
color: #515772;
transform: translateY(-50%);
z-index: -1;
transition: .5s;
padding-left: 20px
}
.validation {
border-color: #c00000 !important;
margin-bottom: 7px;
}
.feedback {
color: #c00000;
}
::placeholder {
margin-left: 60px;
color: #8b8d9d;
font-size: 14px;
font-weight: 700;
}
.cursor {
width: 17px
}
.input-box span::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: linear-gradient(120deg, #2196F3, #FF5722);
transition: .5s
}
.focus+span::before {
top: -5px
}
.focus+span::after {
width: 100%
}
.login-btn {
display: block;
width: 100%;
height: 62px;
border: none;
background: #515772;
background-size: 200%;
color: #fff;
outline: 0;
cursor: pointer;
margin: 20px 0 0;
border-radius: 8px;
transition: .5s;
font-size: 16px;
letter-spacing: 1px;
font-weight: 700;
padding-left: 5px;
padding-right: 5px;
}
.login-btn:focus {
border: 2px solid #000
}
.login-btn:hover {
background-color: #2d3142
}
.bottom-links {
margin-top: 30px;
text-align: center;
font-size: 13px
}
.versionText {
background: transparent;
position: fixed;
inline-size: -webkit-fill-available;
bottom: 10px;
z-index: 10;
text-align: right;
font-size: 13px;
margin-right: 20px;
}
.bottom-links>p>a {
text-decoration: underline;
}
.bottom-links>p {
margin-bottom: 30px;
}
@media (max-width:768px) {
#login-form {
top: 45%;
padding: 0;
}
.source-image {
display: none
}
.versionText {
right: 0% !important;
align-items: center;
text-align: center;
}
}
@media (max-width:576px) {
#login-form {
width: 90%;
top: 50%;
padding: 0;
}
.source-image {
display: none
}
.versionText {
right: 0% !important;
align-items: center;
text-align: center;
}
}
@media (max-width:320px) {
#login-form {
width: 90%;
top: 50%;
padding: 0;
}
.source-image {
display: none
}
.versionText {
right: 0% !important;
align-items: center;
text-align: center;
}
}
@media (max-width:1440px) and (min-width:1024px) {
#login-form {
top: 45%;
padding: 0;
}
.versionText {
right: 0% !important;
align-items: center;
text-align: center;
}
}
@media (max-width:1440px) {
.source-image {
display: none
}
}
.version {
font-size: 13px;
margin-top: 10px;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.keyboardHolder {
display: flex
}
.key {
width: 20%;
margin-left: 10px;
margin-top: 15px;
}
.buttonHolder {
display: flex;
place-content: space-around space-between;
}
.buttonHolder>button:nth-child(1) {
margin-right: 10px;
background-color: #a8b8c9;
color: #262733;
}
</style>
</head>
<body>
<div class="wrapper">
<main>
<form action="" id="login-form">
<div class="logoHolder">
<img src="https://logo.clearbit.com/imgur.com">
<img src="https://logo.clearbit.com/airbnb.com">
</div>
<p class="entryText">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore</p>
<div class="input-box keyboardHolder">
<label for="username">USERNAME </label>
<input id="username" name="username">
<img class="key" src="https://image.flaticon.com/icons/svg/917/917059.svg">
</div>
<div class="input-box keyboardHolder">
<label for="password">PASSWORD </label>
<input id="password" name="password" type="password">
<img class="key" src="https://image.flaticon.com/icons/svg/917/917059.svg">
</div>
<div class="buttonHolder">
<button type="submit" class="login-btn">Return</button>
<button type="submit" class="login-btn">Login</button>
</div>
<div class="bottom-links">
<small class="version">v3.0</small>
</div>
</form>
</div>
</main>
</body>
</html>要尝试实现的是下面的图片(台式机和移动设备):
What a trying to achieve is on images below, desktop and mobile:
桌面
移动
任何善良的人都可以尝试帮助我解决这个问题吗?Flexbox中的新成员，所以请不要对我苛刻.
Can any good soul try to help me with this, am new in Flexbox so don't be harsh on me.
推荐答案
Flexbox布局是一种使创建响应式网页更加容易的好方法.但是将常规"元素转换为"Flexbox"容器只是工作的一部分.
Flexbox Layout is a great means to make creating responsive webpages a lot easier. But converting 'regular' elements to 'Flexbox' containers is just part of the job.
另一部分涉及使所有元素适合各种视口大小，最好不要进行太多代码更改.
Another part involves making all elements fit various viewport sizes, preferably without too many code changes.
对于元素的自动大小调整，重要的是使用尽可能多的相对单位"而不是固定单位"，并了解其区别:
For automatic sizing of elements it is important to use as much 'relative units' as posible instead of 'fixed units' and understand the difference: MDN: CSS values and units and MDN: length (make sure you read these pages). Start using rem, em, vh, vw, etc. instead of px.
为了使您走上正确的道路，我在适用的情况下将每个尺寸值都转换为相对单位".我还简化了原始CSS(并添加了一些数学技巧， MathIsFun:线性方程式和 MathIsFun:直线方程式)，然后将CSS分为四个主要部分:
To put you on the right track, I converted every size value to a 'relative unit' where applicable. I also simplified your original CSS (and added a few math tricks, MathIsFun: Linear Equations and MathIsFun: equation of a straight line) and split the CSS into four major sections:
- 首选的全局设置
- 主页弹性框结构
- 元素的大小和间距
- 仅糖果/主题
这将帮助您组织思想并仅关注设计的特定部分.
This will help you to organize your thoughts and focus on only specific parts of your design.
我确保下面代码段中的最终结果可以在360x640显示器上显示，也可以在更大的显示器上显示.也许在这里和那里弄乱了一些大小或间距，但是现在应该纠正一下.
I made sure that the endresult in the snippet below fits on a 360x640 display and anything larger. Maybe messed up a few sizes or spacing here and there, but that should now be a piece of cake to correct.
警告:在SO上此页面看起来可能很奇怪，但是在SO之外，它运行得很好.仅使用Chrome，Edge和Firefox对调整大小和设备仿真进行了测试.
Warning: here on SO the page may look weird, but outside SO it runs just fine. Tested resize and device emulation with Chrome, Edge and Firefox only.
/***********************************/
/* preferred globals and overrides */
/***********************************/
html,body { box-sizing: border-box; width: 100%; max-width: 100% }
*::before,*::after, * { box-sizing: inherit }
body { margin: 0 }
button, input { font-family: inherit; margin: 0 }
img { display: block }
body[padded="1"],
body[padded="0"] [band*="padded"] {
/*
All math reference: https://www.mathsisfun.com/equation_of_line.html
*/
/*
responsive page padding
and responsive band padding (same as responsive page padding, but at band level)
Top/Bottom padding: p1(320,16) p2(1920, 72) => 0.035x + 4.8 => vary from 16 to 72px
Left/Right padding: p3(320, 8) p4(1920,320) => 0.195x - 54.4 => vary from 8 to 320px
'Band padding' is only active when 'page padding' is off (0)
*/
padding: calc(3.5vh + 4.8px) calc(19.5vw - 54.4px);
}
/* double width padding */
body[padded*="1"][padded*="w2"], body[padded="0"] [band*="padded"][band*="w2"] {
padding: calc(3.5vh + 4.8px) calc((19.5vw - 54.4px) * 2);
}
/* for easy debugging (put in <body>) */
[outlines="1"] * { outline: 1px dashed }
/*******************************/
/* main page flexbox structure */
/*******************************/
/* default: everything is an FBL column of rows */
div, #loginForm { display: flex; flex-flow: column wrap; justify-content: center; align-content: center }
/* exceptions: FBL row of columns */
.logoHolder>*,
.inputHolder>div,
.buttonHolder { flex-flow: row nowrap; width: 100% }
/* alignments */
.wrapper { align-items: center }
/* allow to fill available parent width */
button, input { flex-grow: 1 }
/******************************/
/* element sizing and spacing */
/******************************/
body { height: 100vh }
.wrapper { width: 100%; height: 100% }
/* defaults */
#loginForm>div { padding: 0 0 1rem 0 } /* Holders */
#loginForm>div>* { padding: 0.5rem 0 } /* holder content */
/* exceptions */
.logoImg { padding: 0.5rem 1rem; height: 100% }
.linksHolder { padding: 0.625rem 0 }
/* this and thats */
.inputHolder input {
height: calc(2.25vmax + 28.8px); /* (320,36)(1920,72) */
padding: 0 0.25rem 0 3.5rem; /* L/R only */
max-width: calc(100% - 4vmax - 0.65rem); /* limit 'flex-grow: 1' somewhat */
/* minus correcion for 'keyboard'
=> width (4max), L-margin (0.5rem) and some icon width (0.15rem) quirk */
}
.inputHolder .keyboard {
width : 100%;
max-width: 4vmax;
margin : 0 0 0 0.5rem;
}
.buttonHolder button {
height: calc(1.75vmax + 30.4px); /* (320,36)(1920,64) */
}
#btn-return { margin-right: 1rem }
/**************************/
/* eye-candy/theming only */
/**************************/
body {
font-family: 'Roboto', sans-serif;
background-color: #f9fbff
}
/**/
.inputHolder label {
color: #4a4d67;
font-weight: 700;
}
.inputHolder input {
color: #333; background-color: #fff;
font-size: 1.235rem;
border-radius: 8px; border: 1px solid #51577245;
outline: 0;
box-shadow: 0 3px 11px 0 rgba(81, 87, 114, .2);
}
.inputHolder .keyboard {
background-image: url(https://image.flaticon.com/icons/svg/917/917059.svg);
background-repeat: no-repeat;
background-position: center;
}
.inputHolder input:focus {
border: 1px solid #515772
}
/**/
.buttonHolder button {
color: #fff; background-color: #515772;
font-size: 1rem; letter-spacing: 1px;
border-radius: 8px; border: none;
cursor: pointer;
}
#btn-return { color: #262733; background-color: #a8b8c9 }
.buttonHolder button:focus { border: 2px solid #000 }
.buttonHolder button:hover { background-color: #2d3142 }
/**/
.linksHolder {
text-align: center;
font-size: 0.8125rem; /* was 13px */
}<body padded="1.w2" outlines="0">
<div class="wrapper">
<form action="" id="loginForm">
<div class="logoHolder">
<div>
<img class="logoImg" src="https://logo.clearbit.com/imgur.com">
<img class="logoImg" src="https://logo.clearbit.com/airbnb.com">
</div>
<div class="entryText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
</div>
</div>
<div class="inputHolder">
<label for="username">USERNAME</label>
<div class="inputfield">
<input id="username" name="username">
<div class="keyboard"></div>
</div>
</div>
<div class="inputHolder">
<label for="password">PASSWORD</label>
<div class="inputfield">
<input id="password" name="password" type="password">
<div class="keyboard"></div>
</div>
</div>
<div class="buttonHolder">
<button id="btn-return" type="submit">Return</button>
<button id="btn-submit" type="submit">Login </button>
</div>
<div class="linksHolder">
<div class="version">v3.0</div>
</div>
</form>
</div>
</body>这篇关于使用Flexbox响应登录表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
