媒体查询不适用于 HTML 表单答案

【问题标题】：Media query not working on HTML form媒体查询不适用于 HTML 表单
【发布时间】：2018-08-29 08:37:21
【问题描述】：

当浏览器宽度达到 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>

【问题讨论】：

能否提供名字姓氏的html？因为您的选择器用于标签标签内的输入

标签： html css

【解决方案1】：

您的选择器 — label input — 与您的 HTML 中的任何元素都不匹配。

您的input 元素都不是您的label 元素的后代。

也许您的意思是label, input 选择label 元素和 input 元素。如果是这样，那么它仍然不起作用，因为您稍后使用更具体的选择器（以及最具体的选择器wins the cascade）和label 以类似的方式定义input font-size（它没有' t have a more specific selector, but when selectors are equal, the last one wins the cascade).

【讨论】：

我采纳了 Quintin 的建议并设法通过将媒体查询移至样式的最底部（而不是顶部）来解决此问题，并对我的媒体查询进行了轻微修改以进行输入正如你所建议的那样更具体..非常感谢！ @media only screen and (max-width: 1460px) { label, input[type=text] { font-size: 10px; } }

【解决方案2】：

实际上，您可以根据视口大小放大或缩小字体。有calc() 和vw 单位的方法：基本上你会做类似font-size: 3vw 的事情，然后设置最大和最小字体大小。这是 Smashing Magazine 上的 link to the calculation。文章的其余部分也很有趣。

您可以进一步扩展它并使用媒体查询优化字体大小。

玩得开心！ :)

【讨论】：