brent brent - 5 months ago 11
CSS Question

Getting the right font-size on every mobile device

In my mobile app I use kind of big fonts for example:

<b style="font-size:100px; font-family:Segoe UI">text</b>


When I test it on my phone it looks great but on a smaller phone it's still the same size and it is too big.

What css settings should I use to get the same size on every phone?

Answer

You should be using Media Queries for different device widths.

@media only screen and (max-width: 768px) {
  b {
    font-size: 20px;
  }
}

@media only screen and (max-width: 320px) {
  b {
    font-size: 10px;
  }
}

And so on...