CSS 没有使用正确的字体大小答案

【问题标题】：CSS Not using correct font-sizeCSS 没有使用正确的字体大小
【发布时间】：2016-10-04 14:37:37
【问题描述】：

当我在 Chrome 中打开网页时，第一个卡片文本 div 使用 22 像素的字体大小，但第二个卡片文本 div 指示字体大小为 22 像素，但使用的字体大小为 13.75 像素。两个 div 都表明使用了相同的类：@media screen and (min-width: 350px) and (orientation: portrait)。

我无法找到任何可能导致此问题的解决方案。我希望有人能给我一些方向，让我可以在哪里寻找这个问题......

.card-text {
  color: var(--standard-text-color);
  font-family: standard-font;
}
@media screen and (min-width: 300px) and (orientation: portrait) {
  .card-text {
    font-size: 21px;
    padding: 10px;
    margin: 0px;
  }
}
@media screen and (min-width: 350px) and (orientation: portrait) {
  .card-text {
    font-size: 22px;
  }
}

<div class="card">
  <div class="card-title">Welcome</div>
  <div class="card-text">This is some text</div>
  <div class="card-hidden">
    <div class="card-text">This is some other text</div>
  </div>
</div>

【问题讨论】：

问题可能是多方面的。请提供更多信息。
13.75px 是一种计算样式，当我单击箭头时，它会将我带到最小宽度为 350px 的类。
请问有链接或更完整的代码吗？
请使用片段（问题编辑器中的按钮）、jsfiddle 或类似名称提供问题的实际示例。

标签： html css font-size

【解决方案1】：

这可能有效，也可能无效，但请尝试将其放入您的 HTML 头部：

<meta name="viewport" content="width=device-width, initial-scale=1">

【讨论】：

这确实成功了，我打算在完成样式表后添加一个视口。直到昨天，该网站确实显示正确，而我之前一直在使用媒体查询。感谢您的帮助！

【解决方案2】：

这对于评论来说有点过多，所以我将其写为答案：原因可能是 CSS 规则包含不同的字体大小

组合选择器.card-hidden .card-text（仅影响第二个.card-text）
组合选择器.card > .card-text（仅影响第一个.card-text）
选择器card-text:nth-child(2);（仅影响第一个.card-text）或card-text:first-child;（仅影响第二个.card-text）

可能还有更多，但不知道整个代码不能说是哪个。

由于它们的特殊性，所有这些都将覆盖常规的 .card-text 规则。

最后但并非最不重要的一点是，它也可以被.card-text 的常规 CSS 规则覆盖，该规则遵循所有其他规则（也媒体查询），从而覆盖它们。

【讨论】：