Menu
I'm trying to create a website where the pages resize to the windows size on the fly. While we can get images and such to resize automatically as a % of the div size. We do not seem to be able to resize the text within a div to a relative % of the container.
This feature would need to work as the browser window itself is resized, without having to refresh the page.
The site is basic and is using js,css, html. The simplest method possible would be appreciated, but any solution is fantastic.
Thanks
472
It is related to the font size of the parent container. One em (1em) is equal to the current font size. So for example, if the parent element has the font size of 16px than 1em is equal to 16px, 2em is equal to 32px, and so on. Making your design responsive becomes much easier if you use em units instead of px.
To change font size in HTML, use the CSS font-size property. Set it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.
The font-size-adjust property gives you better control of the font size when the first selected font is not available. When a font is not available, the browser uses the second specified font. This could result in a big change for the font size. To prevent this, use the font-size-adjust property.
To change the font size of a div using JavaScript, get reference to the div element, and assign required font size value to the element. style. fontSize property.
Whipped up some example to adjust font-size on div size change. Using percentage in the parent div and adjusting the font-size there should do the trick.
http://jsfiddle.net/744A2/
134
answered Sep 28 '22 04:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
