html 表单在移动视图中响应？

Question

我有一个像这样编码的表单，我想让它在移动和平板电脑版本中响应或响应无论如何：

</div>
          <div class="contact_form">
            <form
              class="form"
              action="https://sheetdb.io/api/v1/it1l3r9npizts"
              method="post"
              id="sheetdb-form"
            >
              <label for="name">Name:</label>
              <input
                type="text"
                id="name"
                name="data[name]"
                placeholder="Your name"
              />
              <label for="email">Email:</label>
              <input
                type="email"
                id="email"
                name="data[email]"
                placeholder="Your email"
              />
              <label for="message">Message:</label>
              <textarea
                id="message"
                placeholder="Your message"
                rows="6"
                name="data[message]"
              ></textarea>
              <div class="center">
                <input type="submit" value="Send Message" />
              </div>
            </form>
          </div>

使用CSS中的这些样式：

.contact_section {
  width: 100%;
  height: 100%;
}
.contact_form {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.contact_form label {
  margin: 15px 0;
}
.contact_form label {
  font-size: 20px;
  font-weight: 400;
}
.contact_form input,
textarea {
  width: 100%;
  padding: 10px;
  outline: none;
  resize: none;
  border: none;
  border-bottom: 1px solid var(--contrast-color);
}
input[type="text"]:focus,
textarea:focus {
  border-bottom: 2px solid var(--main-color);
}
textarea::-webkit-scrollbar {
  width: 4px;
}
textarea::-webkit-scrollbar-thumb {
  background-color: var(--contrast-color);
}
.center {
  text-align: center;
  width: 602px;
  font-size: 20px;
}
input[type="submit"] {
  margin-top: 30px;
  width: 100%;
  max-width: 200px;
  background-color: var(--netural-color);
  font-size: 17px;
  color: var(--contrast-color);
  font-weight: 400;
  cursor: pointer;
}

我一直在尝试使其响应，因为我的表单不会缩小并且没有当屏幕不断变暗时左侧和右侧的任何填充 较小：

@media screen and (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
  .contact_form input textarea {
    width: 70%;
    margin-top: 0;

  .home-section {
    height: 100vh;
  }
  section {
    height: 100%;
    width: 100%;
  }
}

Answer 1

根据您的代码，我怀疑.center，并且固定宽度正在设置您的表单的宽度。只需删除该宽度或使其响应迅速即可。

.center {
  text-align: center;
  width: 602px;
  font-size: 20px;
}

<form>
 <div class="center">
   <input type="submit" value="Send Message" />
 </div>
</form>