when i built my first all html/css website i used clickable images as a menu and every image and div scaled in % so it would adapt extremely well to all monitors and browsers, and it did.
now on a new project i wanted to do the website menu using a background image for the whole page (with the menu buttons on it but with no text) and then hyperlinked text on top of the image so it would look like a proper menu.
so i though, well if i just put the font-size in % it will probably scale perfectly as the size of the display part of the browser window increases or decreases, it worked so perfectly with everything else so why shouldn’t it work now…
i’ve done it and it doesn’t work, i don’t know where in hell the thing get it’s percentages from, if i set 100% font size in a div that has 2% or 3% the size of the page the text depending on the resolution will be too large or too small.
i know how i can make the things scalable according to the browser window, but how i can make text size scalable according to that thing or the browser window itself?
a response telling how to do this using only css and html it’s better for me, i know a bit of scripting but i don’t like to mix the display part with the script part so if you anybody knows how to make this using only html/css i will continue to use clickable images and percentages or pixels for the whole thing.
thank you.
Another solution to this problem would be to use a fluid / responsive CSS framework, and then use media queries to adjust the font size depending on the width of the browser to make sure it looks great at ever possible width.
A few examples would be:
1140 grid (http://cssgrid.net/)
Skeleton (http://www.getskeleton.com/)
or one I’m currently working (https://github.com/gogogarrett/Muscle)
Hope this helps.