CSS未使用正确的字体大小

问题描述

当我在Chrome中打开网页时，第一个卡片文本div的字体大小为22px，但是第二个卡片文本div的字体大小为22px，但使用的字体大小为13.75px.两个div都表示正在使用相同的类:@media屏幕和(最小宽度:350px)和(方向:纵向).

When I open the webpage in Chrome the first card-text div uses the font-size of 22px but the second card-text div indicates a font-size of 22px but uses a font-size of 13.75px. Both divs indicate that the same class is being used: @media screen and (min-width: 350px) and (orientation: portrait).

我无法找到任何可能导致此问题的解决方案.我希望有人能给我一些指导，让我找到可以解决的问题...

I´m unable to find any solution to what might cause this problem. I hope someone can give me some direction to where I could look for this problem...

.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>

推荐答案

这可能会，也可能不会，但是请尝试将其放在HTML头中:

This may or may not work, but try put this in your HTML head:

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

这篇关于CSS未使用正确的字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！