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>

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

html forms responsive in mobile view?

html

css

forms

responsive-design