Menu
I'm using em for font sizes. Example:
body {
font-size:16px;
}
h1 {
font-size:2em;
}
@media (max-width:860) {
body {
font-size:0.8em;
}
}
For some reason I'm getting super tiny fonts on Android mobile. What might be causing this? I haven't experienced this before.
390
Change Android's text size by going to Settings > Display > Advanced > Font Size. Use the slider to make the text bigger. You can also access the font size setting by going to Settings > Accessibility > Font Size. Android Magnification feature: Go to Settings > Accessibility > Magnification.
By extension, a font-size of 1em equals the computed font-size of the element on which it is used. If a font-size has not been set on any of the <p> 's ancestors, then 1em will equal the default browser font-size , which is usually 16px . So, by default 1em is equivalent to 16px , and 2em is equivalent to 32px .
em is relative to the font size of its direct or nearest parent. That makes it vulnerable to dramatic changes if any of its direct parents have low/high values set for the font-size property.
Instead, you should use rem (root em) that's relative to the font size of the <body> element.
In order for your font-size property to apply correctly, you need to make sure you have the proper viewport settings in <head>. Please note <meta name="viewport" ... > should be the first of your meta tags in order to apply on all devices (some ignore it if it's not first).
185
Since you are using em values for your font-size, it's based on the parent container, and not the <body>. Instead, you can use rem values, which stands for root em, where root is the html tag. So try the following:
html {
font-size: 16px;
}
h1 {
font-size: 2rem;
}
@media (max-width:860) {
body {
font-size: 0.8rem;
}
}
You can learn more about CSS units at W3 School.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
