Html 输入控制文本根据屏幕大小调整大小

在调整窗口大小时，我试图调整输入控件中的文本大小，因为当我减小输入控件中的窗口文本大小时，文本不会完全显示。此问题发生在宽度1032px到575px之间。在575px宽度以下，文本框达到行的全长，可以完全看到文本。基本上我希望输入控件内的文本在宽度575px到1032px之间调整大小。我曾经尝试过vw，vh的输入控制，但它不断减少文本的大小，甚至低于575px的宽度

<div class="sidebar">
  <a href="#" onclick="home_trans()"><i data-feather="home"></i> Home</a>
  <a href="#"><i data-feather="plus-circle"></i> New Travel Application</a>
  <a href="#"><i data-feather="archive"></i> History</a>
</div>

<div class="content">
  <main role="main" class="col-lg-12 col-md-12 col-sm-12 ml-sm-auto px-4">
               <div id='loadingmessage' style='display: none'>
                                     <img id="loading-image" src="Images/Loading.gif" alt="Loading..." />
                </div>
  <div class="form-group" style="margin-top: 90px" id="mai">
                <div class="form-group row">
                    <label for="disabledInput" class="col-sm-3 col-form-label" style="text-align: left; font-size: medium">Name:</label>
                    <div class="col-sm-3">
                        <input runat="server" class="form-control" id="emp_name" type="text" placeholder="Emp Name" disabled="disabled" />
                    </div>
                    <label for="disabledInput" class="col-sm-3 col-form-label" style="text-align: left; font-size: medium">Reporting Manager:</label>
                    <div class="col-sm-3">
                        <input runat="server" class="form-control" id="rpg_mgr" type="text" placeholder="Reporting Manager" disabled="disabled" />
                    </div>                    
                    </div>
       <div class="form-group row" style="margin-top: 20px;">
            <label for="disabledInput" class="col-sm-3 col-form-label" style="text-align: left; font-size: medium">Emp ID:</label>
                    <div class="col-sm-3">
                        <input runat="server" class="form-control" id="emp_num" type="text" placeholder="Emp ID" disabled="disabled" />
                    </div>
                    <label for="disabledInput" class="col-sm-3 col-form-label" style="text-align: left; font-size: medium">Location:</label>
                    <div class="col-sm-3">
                        <input runat="server" class="form-control" id="loc" type="text" placeholder="Location" disabled="disabled" />
                    </div>
                </div>
      <div class="form-group row" style="margin-top: 20px;">
                    <label for="disabledInput" class="col-sm-3 col-form-label" style="text-align: left; font-size: medium">Designation:</label>
                    <div class="col-sm-3">
                        <input runat="server" class="form-control" id="desig" type="text" placeholder="Designation" disabled="disabled" />
                    </div>
                </div>

使用媒体查询

/* Set the font-size of .form-control */
.form-control{
  font-size: 16px;
}

/* On screens that are 992px or less, set font-size to 14px */
@media screen and (max-width: 992px) {
  .form-control{
    font-size: 14px;
  }
}

/* On screens that are 600px or less, set font-size to 12px */
@media screen and (max-width: 600px) {
  .form-control{
    font-size: 12px;
  }
}

---

在这里使用媒体查询做一些事情，@media min-width:575px和max-width:1032px{…}检查非常感谢，它真的很有帮助。我有点困惑媒体查询是如何工作的。但现在情况清楚了。

/* Set the font-size of .form-control */
.form-control{
  font-size: 16px;
}

/* On screens that are 992px or less, set font-size to 14px */
@media screen and (max-width: 992px) {
  .form-control{
    font-size: 14px;
  }
}

/* On screens that are 600px or less, set font-size to 12px */
@media screen and (max-width: 600px) {
  .form-control{
    font-size: 12px;
  }
}