如何使用媒体查询调整文本字段的大小？

对于textarea，响应式联系表格可以正常工作，但对于较小屏幕上的input type=text字段则不适用。我尝试添加媒体查询。如何使用媒体查询调整文本字段的大小？

这里是我的代码：

  <!doctype html> 
      <html> 
      <head> 
      <meta charset="UTF-8"> 
      <title></title> 
      <style> 
      .contact-form { 
       line-height: 1.4; 
       width: 50%; 
       margin: 0 auto; 
      } 
      .form-group { 
       background: #F6DDCE; 
       margin-bottom: 1em; 
       padding: 10px; 
      } 
      .form-group ul { 
       list-style: none; 
       margin: 0 0 2em; 
       padding: 0; 
      } 
      .form-group li { 
       margin-bottom: 0.5em; 
      } 
      .form-group h3 { 
       margin-bottom: 1em; 
      } 
      .form-fields input[type="text"], 
      .form-fields input[type="email"]{ 
      box-sizing: border-box; 
      padding: 0.6em 0.8em; 
      color: #999; 
      background: #f7f7f7; 
      border: 1px solid #e1e1e1; 
      overflow: hidden; 
      text-overflow: ellipsis; 
      white-space: nowrap; 
      font-size: 0.9em; 
      text-decoration: none; 
      line-height: normal; 
      max-height: 3em; 
      } 
      .form-fields input[type="text"]:focus, 
      .form-fields input[type="email"]:focus, 
      .form-fields textarea:focus { 
      color: #333; 
      border: 1px solid #C17CCF; 
      outline: none; 
      background: #f2f2f2; 
      } 
      .form-fields textarea { 
       display: block; 
       box-sizing: border-box; 
       font: 0.9em Lato, Helvetica, sans-serif; 
       width: 100%; 
       height: 6em; 
       overflow: auto; 
       padding: 0.6em 0.8em; 
       color: #999; 
       background: #f7f7f7; 
       border: 1px solid #e1e1e1; 
       line-height: normal; 
      } 
      .form-fields label{ 
       text-align: left; 
      } 
      .send-btn { 
       border-radius: 0px 2px 2px 0px; 
       box-sizing: content-box; 
       background: #8B798C; 
       font-weight: 300; 
       text-transform: uppercase; 
       color: white; 
       padding: 0.35em 0.75em; 
       border: none; 
       font-size: 1.1em; 
       text-decoration: none; 
       cursor: pointer;  
      } 
      .send-btn:hover, .send-btn:focus { 
       background: #C17CCF; 
      } 
      /*flex it*/ 
      .send-form { 
       display: flex; 
       flex-wrap: wrap; 
       } 
      .form-group { 
       flex: 1 0 300px; 
      } 
      .form-submit { 
       flex: 0 0 100%; 
      } 
      .form-fields li { 
       display: flex; 
       flex-wrap: wrap; 
      } 
      .form-fields input[type="text"], 
      .form-fields input[type="email"]{ 
       flex: 1 0 230px; 
      } 
      .form-fields label { 
       flex: 1 0 90px; 
       } 


      /* Adding media queries*/ 

      @media (max-width: 400px) { 
      body { 
       width: 100%; 
       margin: 0; 
       padding: 0 0 2em; 
      } 
      header, .form-submit { 
       padding: 2% 5%; 
      } 
      } 
      </style> 
      </head> 
      <body> 
      <header> 
      </header> 
      <form class="contact-form"> 
      <section class="form-group"> 
      <h3>Contact Us</h3> 
      <ul class="form-fields"> 
      <li><label for="name">Name:</label> <input type="text" name="name" id="name" placeholder="your full name" class="text-input"></li> 
      <li><label for="subject">Subject:</label> <input type="text" name="subject" id="subject" placeholder="subject" class="text-input"></li> 
      <li><label for="email">Email:</label> <input type="email" name="email" id="email" placeholder="confirmation email" class="text-input"></li> 
      <li><label for="comments">Comments:</label><textarea id="comments" name="comments" class="text-area">comments</textarea> </li> 
      </ul> 
      </section> 
      <section class="form-submit"> 
      <button type="submit" class="send-btn">Send</button> 
      </section> 
      </form> 
      </body> 
      </html>

来源

2016-10-03 Aakrisha Agarwal

这是因为输入字段柔性财产flex: 1 0 230px;的。在媒体查询断点中用max-width: 100%;覆盖它。

这里的fiddle：

.form-fields input[type="text"], 
.form-fields input[type="email"] { 
    max-width: 100%; 
}

来源

2016-10-03 09:58:19 vivek

我更早加入上面的代码，但断点为400像素。所以它不起作用。同一组代码与768px一起工作。这意味着，设置正确的断点非常重要。非常感谢.... –

@AakrishaAgarwal请接受它作为答案，如果它可以帮助你。 – vivek

如何使用媒体查询调整文本字段的大小？

回答

相关问题