Question

如何使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>

Answer 1

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

    </style>

Answer 2

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

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

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

如何制作DIV响应css html

2 个答案: