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>
上面代码的 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;
}
}
解决方案
使用媒体查询。
/* 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;
}
}
推荐阅读
- mysql - 替代 MySQL 5.6 子查询
- python - Python 3:如何在范围对象中查找比在列表中查找更快?
- javascript - 如何从按钮的单击事件调用 JavaScript 对象中存在的函数?
- alexa - Alexa 技能管理 - ASK CLI
- php - 是否有任何内置函数可以将不同语言的日期转换为 PHP 中的通用日期格式
- wpf - wpf 数据网格中当前可见的列
- magento2 - Magento 2 Uncaught TypeError: 传递给 __construct() 的参数 1 必须是 Magento\Backend\Block\Template\Context 的实例
- wordpress - WordPress 永久链接将类别名称添加到帖子网址
- ios - Swift - 在 Xib 中动态设置 UITableView 高度
- ios - 当 LynnBubbleTableView 框架中的内容增长时,如何移动到 tableview 的底部?