如何用Media Queries实现表单响应式布局：移动端堆叠PC端同行

Got it, let's get this responsive form working exactly how you want it! The main issue with your current code is that labels and inputs aren't grouped together, which makes it hard to keep them paired on desktop. We'll use flexbox (super reliable for layouts) plus media queries to switch between vertical and horizontal views seamlessly.

Step 1: Refactor the HTML Structure #

First, let's wrap each label-input pair in a .form-group container. This ensures labels and inputs stay connected, no matter the screen size. We'll also replace the outdated <center> tag with CSS centering (it's more flexible and modern):

<html>
<head>
<style>
/* CSS will go here */
</style>
</head>
<body>
<form class="responsive-form">
  <div class="form-group">
    <div class="label">First name:</div>
    <div class="input-wrapper">
      <input type="text" name="firstname"/>
    </div>
  </div>
  <div class="form-group">
    <div class="label">Last name:</div>
    <div class="input-wrapper">
      <input type="text" name="lastname"/>
    </div>
  </div>
  <div class="form-group">
    <div class="label">Email Address:</div>
    <div class="input-wrapper">
      <input type="text" name="email"/>
    </div>
  </div>
  <div class="form-group">
    <div class="label">Address:</div>
    <div class="input-wrapper">
      <input type="text" name="address"/>
    </div>
  </div>
  <div class="form-group">
    <div class="label">I've practiced yoga for at least one year:</div>
    <div class="input-wrapper">
      <input type="checkbox" name="oneyear"/>
    </div>
  </div>
  <div class="form-group submit-group">
    <div class="input-wrapper">
      <input type="submit" name="submit" value="submit"/>
    </div>
  </div>
</form>
</body>
</html>

Step 2: Add Responsive CSS #

Now let's write the CSS. We'll use a mobile-first approach (vertical layout by default), then use a media query to switch to horizontal layout on larger screens:

/* Base styles (mobile-first: vertical layout) */
.responsive-form {
  max-width: 800px;
  margin: 0 auto; /* Centers the form on the page */
  padding: 20px;
}

.form-group {
  display: flex;
  flex-direction: column; /* Stack label and input vertically */
  gap: 8px; /* Space between label and input */
  margin-bottom: 16px; /* Space between form groups */
}

.label {
  font-size: 16px;
  color: #333;
}

.input-wrapper input {
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.submit-group {
  align-items: flex-start; /* Align submit button to the left on mobile */
}

/* Media query for desktop screens (width >= 768px) */
@media (min-width: 768px) {
  .form-group {
    flex-direction: row; /* Place label and input side-by-side */
    align-items: center; /* Vertically center label and input */
    gap: 16px; /* Space between label and input */
  }

  .label {
    flex-basis: 30%; /* Give labels a fixed width */
    text-align: right; /* Align label text to the right for clean look */
  }

  .input-wrapper {
    flex-grow: 1; /* Let input take remaining space */
  }

  .submit-group {
    justify-content: flex-end; /* Align submit button to the right on desktop */
    margin-left: 30%; /* Match label width so it lines up */
  }
}

How This Works #

• Mobile-first approach: We start with vertical stacking, which is ideal for small screens. flex-direction: column ensures labels sit neatly above inputs.
• Desktop layout: When the screen hits 768px or wider, we switch to flex-direction: row to put labels and inputs side-by-side. Fixed label widths and growing inputs keep everything aligned and balanced.
• Spacing: Using gap and margin ensures the form doesn't look cramped on any screen size.

You can tweak the min-width value in the media query (e.g., 600px if you want the horizontal layout to kick in earlier) or adjust the label width (flex-basis: 30%) to fit your design preferences.

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