: Resize font proportional to screen size? How can I have my fonts scale based on screen size? (So, rather than just having a few media queries to adjust to maybe 3 or 4 screen sizes, have
How can I have my fonts scale based on screen size?
(So, rather than just having a few media queries to adjust to maybe 3 or 4 screen sizes, have the font be proportional to the screen size so we make maximum use of the screen.
I need to support all browsers back to ie6.
It's OK if the support is not "pretty" on browsers with < 1% market share but it should at least be usable.
I've considered:
vm (% of viewport size) : not well supported.
FitText.js
Using Ems (this seems to at least adapt somewhat. (If I view it on my phone and change from landscape to portrait the font gets a bit smaller. I"m guessing maybe the phone/browser is resizing the base font in that case.
using a lot of Media queries (10 or 20) and perhaps using EM for all sizes so we only have to set the base (body) font size in the media query.
More posts by @Pope3001725
1 Comments
Sorted by latest first Latest Oldest Best
In my CSS I use percentages for font size changes and make sure that font-size is set to inherit on all element types
h1 {
font-size: 200%
}
h2 {
font-size: 150%
}
table {
font-size: inherit;
}
Then JavaScript just needs to adjust the base font size of the document or body.
$("body").css("font-size",Math.max($(window).width()/50,8)+"px")
That particular statement relies on jQuery, but it should be doable without jQuery as well.
Here is a page where I use the technique to get a chart to take up the entire screen with appropriate sized fonts.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.