如何制作 DIV 响应式 css html答案

【问题标题】：how to make a DIV responsive css html如何制作 DIV 响应式 css html
【发布时间】：2014-09-20 15:18:55
【问题描述】：

如何让 div 响应所有可能性 html代码。我发现 320*480 的问题

   <style>
  .in1{width:275px;height:45px; border-color: #f0b41c;}
   .in3{width:120px;height:40px;}
   .in4{ width:150px;height:40px;}

    </style>
  <div>         

 <input class="in1" type="text"  name="name" placeholder="your name" required>
  <input class="in1"  type="email" name="email" placeholder="your email" required>
  <input class="in3" type="submit" name="submit" value="Sign Up"><br>


     <span style="font-size: 25px; font-weight: 700; line-height: 130%;color: #fff;   padding: 10px;"> SOME TEXT <span style=" font-family: 'Grundschrift';color:#f0b41c;">Some Text</span> SOME TEXT</span>
     <br><input class="in4"  type="submit" name="submit" value="How to Play">  
         </div>

【问题讨论】：

使用百分比代替像素
你到底想做什么？简述你的叙述
正如@Sam1604 所说。你对结果有什么期望。您的输入得到了 % 的答案（即响应式），如果这还不够，您必须更具体地提出您的问题。

标签： html css responsive-design

【解决方案1】：

使用媒体查询，如下所示：

@media screen and (device-width: 768px){ /*Your style to be applied */ }

您可以参考this link了解更多信息。

【讨论】：

【解决方案2】：

 <style>
  .in1{width:80%;height:45px; border-color: #f0b41c;}
   .in3{width:50%;height:40px;}
   .in4{ width:60%;height:40px;}

    </style>

【讨论】：

仅仅改变宽度就够了吗？不，它不起作用，只是增加了 trxt 框的大小
这只是一个示例，根据您的需要设置百分比
感谢您的回答让我知道 % 比 px 有多么重要