根据页面大小调整表单大小的最佳方法是什么？

Question

我现在只用CSS和媒体查询来管理它。

HTML：

<div class="container-fluid booking-md">

<div class="container-fluid form-inline top-space myform">

<input id="searchInput" onclick="scrollWin()" onkeydown="if($('.pac-container').is(':visible') && event.keyCode == 13) {event.preventDefault();}" onfocus="geolocate()" class="ad1" type="text" name="searchInput" placeholder="Enter pickup address">
<input id="searchInput2" onclick="scrollWin()" onkeydown="if($('.pac-container').is(':visible') && event.keyCode == 13) {event.preventDefault();}" onfocus="geolocate2()" class="ad1" type="text" name="searchInput2" placeholder="Enter Destination ">

<input type="text" class="ad1" placeholder="No. of passengers*">
<input size="12" type="text" class="ad2" placeholder="When">
<input size="12" type="text" class="ad2" placeholder="Time">
<span class="left"><button type="button" class="btn btn-quotes btn-lg">GET QUOTES</button></span>
</div>

<div class="complex">Journey more complex?<span class="gap"></span><button type="button" class="btn btn-callback btn-md ">Request a call back</button> </div>

</div>

，CSS是：

  @media screen and (max-width: 1199px) {
       .booking-md {height:230px;}
       .myform {padding-left:2%;padding-right:2%;}
       .ad1 {width:49%;margin-bottom:5px;}
       .ad2 {width:24.2%;margin-bottom:5px;}

   }

   @media screen and (max-width: 992px) {
       .myform {padding-left:5%;padding-right:5%;}
   }


@media screen and (max-width: 768px) {
    .booking-md {height:370px;}
    .myform {padding-left:2.5%;padding-right:2.5%;}
    .ad1 {width:98%;margin-bottom:5px;}
    .ad2 {width:48.6%;margin-bottom:5px;}
    .main {height:240px;}
    .typer {font-size: 5rem;}
    .small {
  margin-left:0px;
  margin-top:0px;
  height:70%;
  width:70%;
  float: left;
}
.nav-image-left {
    margin: 0;
    padding: 0;
    margin-right: 0px;
    margin-top: 20px;
    margin-left: 0px;
    float: left;
} 
.nav-numberxs {
   position:fixed;
   font-weight: bold;
   font-size: 26px;
   float: right;
   top: 40px;
   left:40px;
   color:#362c6e;
}

.nav-numberxs2 {
   position:fixed;
   font-weight: bold;
   font-size: 26px;
   float: right;
   top: 40px;
   left:40px;
   color:#ffffff;
}
   }

我正在制作一个需要根据屏幕尺寸进行调整的表格。

在大屏幕上运行正常。但是当我缩小窗口时，一切都会出乎我的意料。

我该如何解决这个问题？

我查看了列和行，也尝试了更改输入大小，但效果不佳。

最简单的方法是使3个不同的div用于不同的大小并使用不同的表单元素，但是我不能在同一页面上多次使用同一输入ID，还是可以吗？

我当前的代码如下：

<div class="container-fluid booking-md">
<span class="oneway"><button type="button" class="btn btn-oneway btn-lg">One way</button><span class="gap1"></span><button type="button" class="btn btn-return btn-lg">return</button></span>

<div class="container-fluid form-inline top-space myform">

<input id="searchInput" onclick="scrollWin()" onkeydown="if($('.pac-container').is(':visible') && event.keyCode == 13) {event.preventDefault();}" onfocus="geolocate()" class="ad1" type="text" name="searchInput" placeholder="Enter pickup address">
<input id="searchInput2" onclick="scrollWin()" onkeydown="if($('.pac-container').is(':visible') && event.keyCode == 13) {event.preventDefault();}" onfocus="geolocate2()" class="ad1" type="text" name="searchInput2" placeholder="Enter Destination ">

<input type="text" class="ad1" placeholder="No. of passengers*">
<input size="12" type="text" class="ad2" placeholder="When">
<input size="12" type="text" class="ad2" placeholder="Time">
<button type="button" class="btn btn-quotes btn-lg">GET QUOTES</button>
</div>

<div class="complex">Journey more complex?<span class="gap"></span><button type="button" class="btn btn-callback btn-md ">Request a call back</button> </div>

</div>

以下图像显示了我要实现的目标：

大屏幕

中型屏幕

小屏幕