So I want to make the word "WIDTH" resize according to the width of the browser. Right now, only the box around the word resizes, but I want the word to resize as well. I feel like there's something wrong with my calculations.\[code\]<!DOCTYPE html><html><head><style> #header{ margin: 0px; font-size: 200px; display:inline; padding:0px; position:absolute; white-space:nowrap; overflow:hidden; border:thin solid black; height:800px; }</style></head><body style="padding:0px;"><div id="header"> WIDTH </div> <script> var text_div = document.getElementById("header"); var size = function (){ var winW = window.innerWidth; var winH = window.innerHeight; var win_ratio = winW/winH; var offset_width = text_div.offsetParent.clientWidth; var offset_height = text_div.clientHeight; var offset_ratio = offset_width / offset_height; text_div.style.width = offset_width + "px"; document.title = winW + ":" + offset_height; text_div.style.fontSize=String(parseInt(winW/offset_ratio)) + "px"; } window.onresize=function() {size();} //size(); </script></body></html>\[/code\]
How do I make text resizable to browser?
- Thread starter Vedran25
- Start date