Question

当我在Chrome中打开网页时，第一个卡片文本div使用22px的字体大小，但第二个卡片文本div表示字体大小为22px，但使用的字体大小为13.75px。两个div都表示正在使用相同的类：@media screen和（min-width：350px）和（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规则覆盖，该规则在之后所有其他规则（在媒体查询之后）从而覆盖它们。

CSS不使用正确的字体大小

2 个答案: