问题
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:
Desktop
Mobile
Can any good soul try to help me with this, am new in Flexbox so don't be harsh on me.
回答1:
Please use below code for input part.
Css changes
.key {
width: 20%;
margin-left: 10px;
margin-top: 0px;
}
HTML changes
<div class="input-box">
<label for="username">USERNAME </label>
<div class="keyboardHolder">
<input id="username" name="username">
<img class="key" src="https://image.flaticon.com/icons/svg/917/917059.svg">
</div>
</div>
<div class="input-box">
<label for="password">PASSWORD </label>
<div class="keyboardHolder">
<input id="password" name="password" type="password">
<img class="key" src="https://image.flaticon.com/icons/svg/917/917059.svg">
</div>
</div>
回答2:
This is what you need. I marked all my changes in the css code with this - /*add*/. Also, i removed the margin-top: 15px; to center the side keyboard.
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
order: 1; /*add*/
width: 100%; /*add*/
}
.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
order: 2; /*add*/
width: 77%; /*add*/
}
.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;
justify-content: space-between; /*add*/
flex-wrap: wrap; /*add*/
align-items: center; /*add*/
}
.key {
width: 20%;
margin-left: 10px;
/*margin-top: 15px;*/
order: 3; /*add*/
}
.buttonHolder {
display: flex;
place-content: space-around space-between;
}
.buttonHolder>button:nth-child(1) {
margin-right: 10px;
background-color: #a8b8c9;
color: #262733;
}<!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">
</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>
</main>
</div>
</body>
</html>回答3:
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.
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:
- preferred global settings
- main page flexbox structure
- element sizing and spacing
- eye-candy/theming only
This will help you to organize your thoughts and focus on only specific parts of your design.
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.
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>来源：https://stackoverflow.com/questions/63013774/make-login-form-responsive-with-flexbox