CSS Not using correct font-size

问题

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>

回答1:

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

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

回答2:

This is a bit too much for a comment, so i write it as an answer: Reasons could be CSS rules containing a different font size with

a combined selector .card-hidden .card-text (only affecting the second .card-text)
a combined selector .card > .card-text (only affecting the first .card-text)
a selector card-text:nth-child(2); (only affecting the first .card-text) or card-text:first-child; (only affecting the second .card-text)

and probably also some more, but not knowing the whole code it can't be said which.

All these would override the regular .card-text rule due to their specifity.

Last but not least it can also be overridden by a regular CSS rule for .card-text which follows after all the other rules (also after media queries), thereby overwriting them.

来源：https://stackoverflow.com/questions/39840816/css-not-using-correct-font-size

标签

html

css

font-size