The font size that expands when the window is resized.

Question

How to make my font in HTML so that when the window expands, the text size also expands. Similar to setting a percentage for text that will occupy a percentage of the size of the field in which it is located.

Here is an illustration of what I would like to do:

#box #text { font-size: 50%; } 

Now let's say #box is 200px, #text is 100px. Obviously, I can't just set the patch width for #text , because the #box site will have dynamic width.

Answer 1

Do it in jquery.

 $(window).resize(function(){ $('#box #text').css('font-size',($(window).width()*0.5)+'px'); }); 

Answer 2

Use the tags vh (viewport height), vw (viewport width) and / or vm (minimum viewport size (smallest size)) in browsers that fully support CSS3, and for other browsers listen for resize and JavaScript, for example, Razor Storm answer.

Answer 3

In browsers that support it, you can use CSS multimedia queries to change the layout depending on the width of the window.