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

Question

当我在 Chrome 中打开网页时，第一张卡片文本 div 使用 22px 的字体大小，但第二张卡片文本 div 指示字体大小22px 但使用 13.75px 的字体大小。 div 表示正在使用相同的 class：@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>

Answer 1

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

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

Answer 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 规则覆盖，该规则遵循在所有其他规则之后（也 after 媒体查询），从而覆盖它们。

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

CSS Not using correct font-size

html

css

font-size