CODEWITHSUNDEEP
htmlcssresponsive-design
Markus Finell
Markus Finell

Reputation: 336

Difference between font sizes on mobile vs desktop browser

I havet tried reading about making font sizes responsive and about using device-width for mobile browsers. But I just cant seem to make sense of it. The font size in proportion to the window is a lot different between mobile and desktop browsers. How can I solve this?

This is my current css for my h1:

h1 {
font-size: 3em;
}

@media (min-width: 520px) {

h1 {
    font-size: 3.5em;
}
}

@media (min-width: 760px) {
h1 {
    font-size: 4em;
}
}

@media (min-width: 960px) {
h1 {
    font-size: 5em;
}
}

And yes, I have included this:

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

Upvotes: 1

Views: 2487

Answers (2)

Markus Finell
Markus Finell

Reputation: 336

I ended up using font-size:10vw instead. i'll just use a fallback to correct for lack of browser support :)

Upvotes: 1

Brad
Brad

Reputation: 163272

There are varying ways to solve this. When I can get away with it (simple layout, content-driven site) I leave 1em alone, letting the device figure out what size the text should be for it. Everything is scaled from there.

Since ems are relative measurements, you shouldn't be setting the size of your headings differently for every width of device. Set your heading at 2em or wherever you want it, and then let it scale from the base font size on body. Then, if you have to do any scaling at all, just set that base font size and the rest of the page falls in line.

Upvotes: 1

Related Questions