html - 输入控件文本根据屏幕大小调整大小

Question

我试图在调整窗口大小时调整输入控件中文本的大小，因为当我减小输入控件内的窗口文本的大小时没有完全显示。此问题发生在宽度 1032px 到 575px 之间。在 575px 宽度以下，文本框达到行的全长并且可以完全看到文本。基本上我希望输入控件内的文本在宽度 575px 到 1032px 之间调整大小。我已经尝试使用“vw”、“vh”进行输入控制，但它会继续减小文本的大小，甚至低于 575 像素宽度。

<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>

上面代码的 CSS 文件是:

 body {
      margin: 0;
      font-family: "Lato", sans-serif;
      padding-top:55px;
    }
      #loadingmessage {
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       position: fixed;
       display: block;
       opacity: 0.7;
       background-color: #fff;
       z-index: 99;
       text-align: center;
    }

                #loading-image {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 100;
    }
    .feather {
      width: 16px;
      height: 16px;
      vertical-align: text-bottom;
    }
    .sidebar {
      margin: 0;
      padding: 0;
      width: 150px;
      background-color: #f1f1f1;
      position: fixed;
      height: 100%;
      overflow: auto;
      overflow-x:hidden;
      padding-top: 55px;
    }

    .sidebar a {
      display: block;
      color: black;
      padding: 16px;
      text-decoration: none;
    }

    .sidebar a.active {
      background-color: #4CAF50;
      color: white;
    }

    .sidebar a:hover:not(.active) {
      background-color: #555;
      color: white;
    }

    div.content {
      margin-left: 150px;
      margin-top:80px;
      padding-right:16px;
    }

    @media screen and (max-width: 700px) {
      .sidebar {
        width: 100%;
        height: auto;
        position: relative;
      }
      .sidebar a {float: left;}
      div.content {margin-left: 0;}
      div.content{
          margin-top:unset;
      }
    }

    @media screen and (max-width: 400px) {
      .sidebar a {
        text-align: center;
        float: none;
      }
      div.content{
          margin-top:unset;
      }
    }

Answer 1

使用媒体查询。

/* 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;
  }
}