联系表单字段无响应/无法扩展答案

【问题标题】：Contact form fields not responsive/won't scale联系表单字段无响应/无法扩展
【发布时间】：2014-01-02 07:40:36
【问题描述】：

这是 HTML 表单：

<form method="post" action="/cgi-bin/Contact.pl"  id="contact-form">
  <div id="wrapping" class="clearfix">  
    <section id="aligned">  
      <input type="text" name="name" id="name" placeholder="Name..." autocomplete="off" tabindex="1" class="txtinput" data-validate="validate(required)">  
      <input type="email" name="email" id="email" placeholder="Email..." autocomplete="off" tabindex="2" class="txtinput" data-validate="validate(required, email)">  
     <textarea name="message" type="text" id="message" placeholder="Message..." tabindex="3" class="txtblock" data-validate="validate(minlength(20))"></textarea> 

   <div id="buttons">
      <input type="reset" name="reset" class="button" tabindex="4" value="Clear">
      <input type="submit" name="submit" class="button" tabindex="5" value="Send">
   <br style="clear:both;">
   </div>
</section>

这里是对应的css：

#contact-form { 
    -moz-box-sizing: border-box; /*Firefox 1-3*/
    -webkit-box-sizing: border-box; /* Safari */    
    box-sizing: border-box; 
    }
#contact-form .txtinput { 
    display: block;
    font-family: "Helvetica Neue", Arial, sans-serif;
    border-style: solid;
    border-width: 1px;
    border-color: #DEDEDE;
    margin-bottom: 20px;
    font-size: 1em;
    padding: 11px 25px;
    padding-left: 55px;
    width: 90%;
    color: #777;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    }
#contact-form .txtinput:focus { 
    color: #999;
    border-color: rgb(255, 102, 0);
    border-color: rgba(255, 102, 0, 0.2);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 0.6);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 0.6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 0.6);
    outline: 0 none; 
    }
#contact-form #name {
    background: #FFF url('../images/contact/user.png') 5px 4px no-repeat;
    }
#contact-form #email {
    background: #FFF url('../images/contact/email.png') 5px 4px no-repeat;
    }
#contact-form textarea {
    display: block;
    font-family: "Helvetica Neue", Arial, sans-serif;
    border-style: solid;
    border-width: 1px;
    border-color: #DEDEDE;;
    margin-bottom: 15px;
    font-size: 1em;
    padding: 11px 25px;
    padding-left: 55px;
    width: 90%;
    height: 180px;
    color: #777;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    }
#contact-form textarea:focus {
    color: #999;
    border-color: rgb(255, 102, 0);
    border-color: rgba(255, 102, 0, 0.2);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 1);
    outline: 0 none; 
    }
#contact-form .txtblock {
    background: #FFF url('../images/contact/speech.png') 5px 4px no-repeat;
    }
#contact-form #slider { width: 60%; }
#contact-form #aligned { 
    box-sizing: border-box; 
    float: left; 
    width: 450px; 
    }
#wrapping { width: 100%; box-sizing: border-box; }

一切正常，直到我在较小的设备/屏幕上显示，然后字段没有响应，并且开箱即用并溢出到背景上，如链接中提供的图像所示。任何帮助将非常感激。谢谢。

示例链接：http://www.livepurposely.net/image.png

【问题讨论】：

你在使用引导程序吗？
请创建jsfiddle.net
也许#contact-form 元素填充不应定义为像素，而是百分比？尝试在浏览器的检查器中调整这些参数，或者按照之前的要求创建一个 [jsfiddle](jsfiddle.net)。

标签： html forms css responsive-design

【解决方案1】：

在您的 css 中，您将 #aligned 的宽度限制为 450px，并在填充中使用 px，最好在填充中使用 % 进行响应式设计

信息： px 将宽度限制为指定单位，不适合响应式设计，请改用 %

更新 CSS

#contact-form .txtinput {
   padding: 3% 5%; // earlier 11px 25px
   padding-left: 2%;
}

#contact-form textarea {
   padding: 3% 5%;
   padding-left: 2%;
}

#contact-form #aligned {
    box-sizing: border-box;
    float: left;
    width: 90%; // earlier it was 450px update % as per your need
}

http://jsfiddle.net/raunakkathuria/nh5aZ/2/

【讨论】：