html - 媒体查询不适用于 HTML 表单
问题描述
当浏览器宽度达到 1460 像素或更少时,我希望表单标签和输入字段的字体大小从 18 像素缩小到 10 像素。
我读到当浏览器宽度减小时,不可能让字体自动“缩小”,我需要改用媒体查询。
因此,我在样式标签的顶部放置了一个媒体查询,询问我的标签的字体大小,并在屏幕大小为 1460 像素时输入以 10 像素显示,但它似乎不起作用。但是,我的其余代码工作正常,因此它一定与我编写媒体查询的方式有关。
如果有人可以提供一些帮助,将不胜感激..我的代码粘贴在下面。
@media only screen and (max-width: 1460px) {
label input {
font-size: 10px;
}
}
* {
box-sizing: border-box;
}
input[type=text],
select {
width: 95%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
resize: vertical;
transition: 0.3s;
outline: none;
font-family: Typ1451-Medium;
font-size: 18px;
margin: 7px;
}
input[type=text]:focus {
border: 1.25px solid #ea0088;
}
label {
padding: 21px 12px 12px 12px;
margin-left: 5px;
display: inline-block;
font-family: Typ1451-Medium;
font-size: 18px;
color: #999;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: 2.5% 20% 0 20%;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.left,
.right {
width: 50%;
}
form {
display: flex;
}
<div class="container">
<form action="signin.php" method="post">
<div class="left">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="* Please complete">
</div>
</div>
</div>
<div class="right">
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="* Please complete">
</div>
</div>
</div>
</form>
</div>
解决方案
您的选择器 — label input
— 不匹配 HTML 中的任何元素。
您的所有元素都不是您的input
元素的后代label
。
也许您的意思label, input
是选择label
元素和 input
元素。如果是这样,那么它仍然不起作用,因为您input
稍后使用更具体的选择器定义字体大小(并且最具体的选择器赢得 cascade)并且label
以类似的方式(它没有更具体的选择器, but when selectors are equal, the last one wins the cascade).
推荐阅读
- python - 安装 requirements.txt 错误
- python - 如何填充由多条曲线组成的形状?
- php - codeigniter 单选按钮表单的问题
- python - 可取消和非阻塞延迟
- amazon-web-services - 如何在标题中隐藏授权码?
- botframework - 如何在 Slack 中为 OAuth v2 在 Azure Bot 服务上生成嵌入代码
- javascript - 如何获取输入类型号的值并放入全局变量JS
- mysql - 窗口函数 ROW_NUMBER() 使用变量 RUNNING TOTAL 更改处理 ORDER BY
- css - 如何右对齐 LINQPad 查询结果中的一列?
- github - 我是否为我们的团队正在尝试做的事情正确设置存储库?