移动设备上的表单域缩小得太小

Question

目前，我的表单在桌面上的显示效果和我想要的一样。下面的例子

但是，当在移动设备上压缩时，表单字段看起来太紧了

如何更好地控制表单域在移动设备上的显示方式（宽度）。这也是媒体查询，还是我的代码有问题导致表单字段宽度在移动设备上变得太紧？

@import url('https://fonts.googleapis.com/css?family=Inter:400,500,600,700,800,900');
* {
  box-sizing: border-box;
}

.padding {
  background: #f0f0f0 !important;
  min-height: 100vh;
  display: flex;
  font-weight: 400;
  font-family: 'Inter';
  -left: 20vw;
  min-width: 100%;
}

h2,
h3,
h4,
h5,
h6,
label,
span {
  font-weight: 500;
  font-family: 'inter';
}

body,
html,
.App,
#root,
.auth-wrapper {
  width: 100%;
  height: 100%;
}

p {
  font-family: Inter;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 28px;
  color: #939599;
}

h1 {
  font-family: Inter;
  font-weight: 800;
  font-size: 24px;
  line-height: 40px;
  color: #494D61;
}

.navbar-light {
  background-color: #ffffff;
}

.Logo {
  margin-top: 2vh;
}

.auth-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
  background: #ffffff;
  margin: 8vw 0;
  position: center;
  align-items: center;
  justify-content: center;
}

.auth-inner {
  width: 1000px;
  margin: auto;
  background: #ffffff;
  margin: 40px 55px 45px 55px;
  border-radius: 15px;
  transition: all .3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-wrapper .form-control:focus {
  border-color: #FBB381;
  box-shadow: none;
}

.auth-wrapper .form-control {
  background-color: #F8F8F8;
  border-color: #EBEBEB;
}

.auth-wrapper h3 {
  text-align: center;
  margin: 0;
  line-height: 1;
  margin-bottom: 20px;
}

.custom-control-label {
  font-weight: 400;
}

.forgot-password,
.forgot-password a {
  text-align: right;
  font-size: 13px;
  margin-top: 10px;
  color: #7f7d7d;
  margin: 0;
}

.forgot-password a {
  color: #FBB381;
}

.form-group:not(:nth-of-type(1)) {
  margin: 5px 0;
}

.form-signup {
  display: grid;
  /* to use css-grid */
  grid-template-columns: 1fr 1fr;
  /* creates 2 columns */
  gap: 10px 50px;
  /* creates a gap between the columns and rows */
}

.form-login {
  display: flex;
  /* to use css-grid */
  width: 35vw;
  gap: 10px 50px;
  /* creates a gap between the columns and rows */
}

form.form-login .login>div.form-group {
  margin: 15px 0px;
}

form h3,
form h4,
form p,
form button {
  grid-column: span 2;
  /* lets those elements span both columns */
}

.signup-button {
  grid-column: span 2;
  /* lets those elements span both columns */
  background-color: #FBB381;
  border-radius: 5px;
  border: #FBB381;
  height: 50px;
  color: white
}

.login {
  display: flex;
  flex-direction: column;
  width: 75vw;
  /* flexbox is sued to palce the label and input below each other and allows the input to fill out the entrie width */
}

.button {
  background-color: #FBB381;
  border-radius: 5px;
  border: #FBB381;
  height: 50px;
  color: white;
}

.login-button {
  background-color: #FBB381;
  border-radius: 5px;
  border: #FBB381;
  height: 50px;
  color: white;
  margin-top: 15px;
  border-radius: 5px;
}

.sidebar-container {
  min-height: 100vh;
  background-color: lightgray;
}

.sidebar {
  padding-top: 15px;
}

.sidebar-link {
  padding: 0px;
}

.sidebar-link:hover {
  border-right: 5px solid #FBB381;
  background-color: gainsboro;
}

import React, { Component } from "react"; import TopNav from "./TopNav" export default class Login extends Component { render() { return (

<div>
  <TopNav />

  <div className="auth-wrapper">
    <div className="auth-inner">
      <form className="form-login">

        <div className="login">
          <h4>Sign In</h4>
          <div className="form-group">
            <label>Email address</label>
            <input type="email" className="form-control" placeholder="Enter email" />
          </div>
          <div className="form-group">
            <label>Password</label>
            <input type="password" className="form-control" placeholder="Enter password" />

          </div>


          <button type="submit" className="button">Login</button>
          <p className="forgot-password text-right">
            Forgot <a href="/">password?</a>
          </p>
        </div>
      </form>
    </div>
  </div>
</div>
); } }

Answer 1

您可以在 <form> 上设置 min-width。

Flex 会随浏览器一直缩小，min-width 允许它继续缩小，但在达到所需宽度时停止缩小。

@import url('https://fonts.googleapis.com/css?family=Inter:400,500,600,700,800,900');
* {
  box-sizing: border-box;
}

.padding {
  background: #f0f0f0 !important;
  min-height: 100vh;
  display: flex;
  font-weight: 400;
  font-family: 'Inter';
  -left: 20vw;
  min-width: 100%;
}

h2,
h3,
h4,
h5,
h6,
label,
span {
  font-weight: 500;
  font-family: 'inter';
}

body,
html,
.App,
#root,
.auth-wrapper {
  width: 100%;
  height: 100%;
}

p {
  font-family: Inter;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 28px;
  color: #939599;
}

h1 {
  font-family: Inter;
  font-weight: 800;
  font-size: 24px;
  line-height: 40px;
  color: #494D61;
}

.navbar-light {
  background-color: #ffffff;
}

.Logo {
  margin-top: 2vh;
}

.auth-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
  background: #ffffff;
  margin: 8vw 0;
  position: center;
  align-items: center;
  justify-content: center;
}

.auth-inner {
  width: 1000px;
  margin: auto;
  background: #ffffff;
  margin: 40px 55px 45px 55px;
  border-radius: 15px;
  transition: all .3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-wrapper .form-control:focus {
  border-color: #FBB381;
  box-shadow: none;
}

.auth-wrapper .form-control {
  background-color: #F8F8F8;
  border-color: #EBEBEB;
}

.auth-wrapper h3 {
  text-align: center;
  margin: 0;
  line-height: 1;
  margin-bottom: 20px;
}

.custom-control-label {
  font-weight: 400;
}

.forgot-password,
.forgot-password a {
  text-align: right;
  font-size: 13px;
  margin-top: 10px;
  color: #7f7d7d;
  margin: 0;
}

.forgot-password a {
  color: #FBB381;
}

.form-group:not(:nth-of-type(1)) {
  margin: 5px 0;
}

.form-signup {
  display: grid;
  /* to use css-grid */
  grid-template-columns: 1fr 1fr;
  /* creates 2 columns */
  gap: 10px 50px;
  /* creates a gap between the columns and rows */
}

.form-login {
  min-width: 350px;
  display: flex;
  /* to use css-grid */
  width: 35vw;
  gap: 10px 50px;
  /* creates a gap between the columns and rows */
}

form.form-login .login>div.form-group {
  margin: 15px 0px;
}

form h3,
form h4,
form p,
form button {
  grid-column: span 2;
  /* lets those elements span both columns */
}

.signup-button {
  grid-column: span 2;
  /* lets those elements span both columns */
  background-color: #FBB381;
  border-radius: 5px;
  border: #FBB381;
  height: 50px;
  color: white
}

.login {
  display: flex;
  flex-direction: column;
  width: 75vw;
  /* flexbox is sued to palce the label and input below each other and allows the input to fill out the entrie width */
}

.button {
  background-color: #FBB381;
  border-radius: 5px;
  border: #FBB381;
  height: 50px;
  color: white;
}

.login-button {
  background-color: #FBB381;
  border-radius: 5px;
  border: #FBB381;
  height: 50px;
  color: white;
  margin-top: 15px;
  border-radius: 5px;
}

.sidebar-container {
  min-height: 100vh;
  background-color: lightgray;
}

.sidebar {
  padding-top: 15px;
}

.sidebar-link {
  padding: 0px;
}

.sidebar-link:hover {
  border-right: 5px solid #FBB381;
  background-color: gainsboro;
}

<div>
  <TopNav />

  <div class="auth-wrapper">
    <div class="auth-inner">
      <form class="form-login">
        <div class="login">
          <h4>Sign In</h4>
          <div class="form-group">
            <label>Email address</label>
            <input type="email" class="form-control" placeholder="Enter email" />
          </div>
          <div class="form-group">
            <label>Password</label>
            <input type="password" class="form-control" placeholder="Enter password" />
          </div>
          <button type="submit" class="button">Login</button>
          <p class="forgot-password text-right">
            Forgot <a href="/">password?</a>
          </p>
        </div>
      </form>
    </div>
  </div>
</div>

Answer 2

此外，您可以使用 media-queries 来表示不同的尺寸。我从您的 CSS（请注意 .auth-inner 和 html,body,.auth-wrapper ...）和您的 HTML:

中删除了一些代码

@import url('https://fonts.googleapis.com/css?family=Inter:400,500,600,700,800,900');
* {
  box-sizing: border-box;
}

.padding {
  background: #f0f0f0 !important;
  min-height: 100vh;
  display: flex;
  font-weight: 400;
  font-family: 'Inter';
  -left: 20vw;
  min-width: 100%;
}

h2,
h3,
h4,
h5,
h6,
label,
span {
  font-weight: 500;
  font-family: 'inter';
}
/*
body,
html,
.App,
#root,
.auth-wrapper {
  width: 100%;
  height: 100%;
} removed
*/ 
p {
  font-family: Inter;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 28px;
  color: #939599;
}

h1 {
  font-family: Inter;
  font-weight: 800;
  font-size: 24px;
  line-height: 40px;
  color: #494D61;
}

.navbar-light {
  background-color: #ffffff;
}

.Logo {
  margin-top: 2vh;
}

.auth-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
  background: #ffffff;
  margin: 8vw 0;
  position: center;
  align-items: center;
  justify-content: center;
}

.auth-inner {
  /* width: 1000px; removed */
  margin: auto;
  background: #ffffff;
  margin: 40px 55px 45px 55px;
  border-radius: 15px;
  transition: all .3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-wrapper .form-control:focus {
  border-color: #FBB381;
  box-shadow: none;
}

.auth-wrapper .form-control {
  background-color: #F8F8F8;
  border-color: #EBEBEB;
}

.auth-wrapper h3 {
  text-align: center;
  margin: 0;
  line-height: 1;
  margin-bottom: 20px;
}

.custom-control-label {
  font-weight: 400;
}

.forgot-password,
.forgot-password a {
  text-align: right;
  font-size: 13px;
  margin-top: 10px;
  color: #7f7d7d;
  margin: 0;
}

.forgot-password a {
  color: #FBB381;
}

.form-group:not(:nth-of-type(1)) {
  margin: 5px 0;
}

.form-signup {
  display: grid;
  /* to use css-grid */
  grid-template-columns: 1fr 1fr;
  /* creates 2 columns */
  gap: 10px 50px;
  /* creates a gap between the columns and rows */
}

.form-login {
  display: flex;
  /* to use css-grid */
  width: 35vw;
  gap: 10px 50px;
  /* creates a gap between the columns and rows */
}

form.form-login .login>div.form-group {
  margin: 15px 0px;
}

form h3,
form h4,
form p,
form button {
  grid-column: span 2;
  /* lets those elements span both columns */
}

.signup-button {
  grid-column: span 2;
  /* lets those elements span both columns */
  background-color: #FBB381;
  border-radius: 5px;
  border: #FBB381;
  height: 50px;
  color: white
}

.login {
  display: flex;
  flex-direction: column;
  width: 75vw;
  /* flexbox is sued to palce the label and input below each other and allows the input to fill out the entrie width */
}

.button {
  background-color: #FBB381;
  border-radius: 5px;
  border: #FBB381;
  height: 50px;
  color: white;
}

.login-button {
  background-color: #FBB381;
  border-radius: 5px;
  border: #FBB381;
  height: 50px;
  color: white;
  margin-top: 15px;
  border-radius: 5px;
}

.sidebar-container {
  min-height: 100vh;
  background-color: lightgray;
}

.sidebar {
  padding-top: 15px;
}

.sidebar-link {
  padding: 0px;
}

.sidebar-link:hover {
  border-right: 5px solid #FBB381;
  background-color: gainsboro;
}

@media screen and (max-width: 900px){
    .form-login{
        width: 50vw;
    }
}
@media screen and (max-width: 600px){
    .form-login{
        width: 70vw;
    }
}
@media screen and (max-width: 400px){
    .form-login{
        width: 90vw;
    }
}

<div>
  <div class="auth-wrapper">
    <div class="auth-inner">
      <form class="form-login">

        <div class="login">
          <h4>Sign In</h4>
          <div class="form-group">
            <label>Email address</label>
            <input type="email" class="form-control" placeholder="Enter email" />
          </div>
          <div class="form-group">
            <label>Password</label>
            <input type="password" class="form-control" placeholder="Enter password" />

          </div>


          <button type="submit" class="button">Login</button>
          <p class="forgot-password text-right">
            Forgot <a href="/">password?</a>
          </p>
        </div>
      </form>
    </div>
  </div>
</div>

移动设备上的表单域缩小得太小

Form fields shrinking too small on mobile

html

css

flexbox

reactjs