如何利用Flexbox实现Mockup所示的响应式登录表单设计？

Hey Steve2Fish, let’s get your responsive login form sorted using Flexbox! We’ll adjust your existing code to handle both screen sizes (<400px and >400px) while matching the mockup’s design. Here’s a step-by-step solution:

1. Tweak the HTML Structure (Small but Impactful) #

First, we’ll add minor changes to make styling cleaner and ensure responsiveness works properly:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Critical for mobile responsiveness -->
<title>Login</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<div class="wrapper">
<main class="login-card">
<h2>Login</h2>
<form method="POST" action="main.html" class="login-form">
<div class="form-group">
<label for="username"><b>Username:</b></label>
<input id="username" type="text" placeholder="Username" required/>
</div>
<div class="form-group">
<label for="password"><b>Password:</b></label>
<input id="password" type="password" placeholder="Password" required/>
</div>
<input class="button" type="submit" value="Login"/>
</form>
</main>
</div>
</body>
</html>

Note: The <meta name="viewport"> tag is non-negotiable here—it tells the browser to use the device’s actual screen width instead of scaling, which breaks responsive layouts.

2. Revamp the CSS with Flexbox & Media Queries #

Now we’ll rewrite the CSS to center the login card, add polished styling, and handle the two screen scenarios:

/* Reset default browser styles for consistency */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  align-items: center; /* Vertically center the login card */
  justify-content: center; /* Horizontally center the login card */
  min-height: 100vh; /* Make wrapper fill the entire viewport height */
  background: linear-gradient(to bottom, #F4F6F9, #D3D8E8);
  font-family: Arial, sans-serif;
  padding: 1rem; /* Prevent card from touching screen edges on small devices */
}

.login-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Soft shadow for depth */
  padding: 2rem;
  width: 100%;
  max-width: 400px; /* Limit card width on larger screens */
}

.login-card h2 {
  margin-bottom: 1.5rem;
  color: #333;
}

.login-form .form-group {
  margin-bottom: 1rem;
  text-align: left; /* Align labels to left for better readability */
}

.login-form label {
  display: block;
  margin-bottom: 0.5rem;
  color: #555;
}

.login-form input[type="text"],
.login-form input[type="password"] {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.login-form input:focus {
  outline: none;
  border-color: #88a8e0; /* Highlight input when focused */
  box-shadow: 0 0 0 2px rgba(136, 168, 224, 0.2);
}

.button {
  width: 100%;
  padding: 0.8rem;
  background: #4a6fd8; /* Primary button color */
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.button:hover {
  background: #3a5bb8; /* Darken button on hover */
}

/* Adjustments for screens smaller than 400px */
@media (max-width: 399px) {
  .login-card {
    padding: 1.5rem; /* Reduce padding to save space */
  }
  
  .login-form input[type="text"],
  .login-form input[type="password"],
  .button {
    padding: 0.7rem; /* Slightly smaller input/button padding */
  }
}

Key Details to Note #

• Flexbox Centering: The .wrapper uses align-items: center and justify-content: center to keep the login card perfectly centered on any screen size.
• Responsive Card: max-width: 400px prevents the card from stretching too wide on large displays, while width: 100% ensures it fits snugly on mobile.
• Small Screen Optimization: The media query tweaks padding to make the form feel more natural on devices under 400px wide.
• Polished UI: Added shadows, rounded corners, and focus states to match modern form designs—you can tweak colors and shadows to exactly match your mockup.

This setup will give you a smooth, responsive login form that adapts seamlessly to both screen scenarios. 😊

内容的提问来源于stack exchange，提问作者Steve2Fish