如何使我的表单适应各种尺寸

Question

我一直在处理我的表单：https://jsfiddle.net/8x49dzfq/

我正在努力通过将其放入容器中来使整体响应。

<div style="border: 1px solid #ABABAB; padding: 30px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; text-align: center; width: 50%; margin: 0 auto;">

但是现在还没有响应。如截屏所示：http://prntscr.com/emwxwi

我想让这个表单响应所有屏幕尺寸，并在每个文本框和填充上放置一些空格，使它们有点大..

知道我应该做什么吗？

Answer 1

input, select, textarea {
  width: 100%;
}

赋予元素宽度100％以使其流畅。

例如，您希望在某个断点中应用这些样式。您可以使用媒体查询。

@media (max-width: 400px) {
  input, select, textarea {
    width: 100%;
  }
}