how to change the font-size proportionally to the change size of the window in CSS3 or javascript

Question

I do some web app and i have some problem with font-size . How to change the font-size proportionally to the change size of the window in CSS3 or javascript?

Answer 1

The ideal way to do this is using the vw unit, which is defined as 1/100th of the viewport width (hence the name). So, for instance, if you wanted your text to be 4.5% of the browser's width at all times, you could use the size:

font-size: 4.5vw;

… and theoretically , that should work. Unfortunately, you'll find, it doesn't quite work as expected: there's a bug in WebKit browsers (at least) where the value for font size isn't live-updating (although it is for all other dimensions). You need to trigger a repaint in order for the font size to change, which can be done by updating the z-index property from JavaScript:

window.addEventListener('resize', function(){
    document.getElementById('myEl').style.zIndex = '1';
}, false);

This may create a little bit of choppiness, but it means you don't have to calculate any actual dimensions in JavaScript, and you don't need to used "stepped" sizes like with media queries.

Answer 2

The ideal way to do so is to combine between the VW font-size and @media queries. Reasons are:

1) em for itself won't rescale by window size

2) vm for itself will be too small for resolutions / screens lower than 800px.

So the right way to achieve this is:

• Define a class - prop-text with VM=1.0 for your desired screen width
• Add media queries to fit the font-size with your desired lower resolution grids.

For my responsive grid (which sets a 1/2 column to take 100% width below 768px width) it looks like that:

<style>
    .prop-text{font-size:1.0vw}
    @media (max-width : 768px) {
    .prop-text{font-size:2.0vw}
    }
    /*other media queries here - fit font size to smartphone resolutions */
</style>

<div class="prop-text">your text is here</div>

Answer 3

Set your base font size (the one you define for your body element in css) in px then everywhere in the rest of your page set font sizes relative to that one using em unit, then you can use media queries to change the font sizes of all your pages by just changing your base font, something like this:

body {
  font-size: 15px;
}
@media (max-width: 1000px) {
  body { font-size: 1.3em; }
}
@media (max-width: 500px) {
  body { font-size: 1.1; }
}

Answer 4

You have 3 ways to do it:

1. Using http://fittextjs.com/ , but pages can start to be slower
2. Using media queries
3. Using ems

Now, it depends on what you want to be your final result. I'd go to option no 3.

Answer 5

I think the best way might be vh , beeing that font-size changes the height of the text. Using vh means that the text will always foolow the size of the page, even if the user resizes the page or the screen is small .