Can I shrink or expand text according to browser resolution just using html and css?
Basically I want to create a website which is compatible with 1024x768 and 320x480. I managed everything to shrink to size (images, video) but I wasn't able to find a way to shrink the text from 1024x768 to 320x480.
Has anyone got a simple solution to this? Has anyone had the same problem?
I'm open to any ideas which involve css3 and html5, I dont't want to use anything else javascript,jquery. That are the specifications given to me.
You can use something like
@media screen and (max-width: 500px) {
body { font-size: 12px;}
}
to set different rules for different resolutions
And add <meta name="viewport" content="width=device-width" /> to the html head, since otherwise some mobile browsers will evaluate the css pixels as if they had a bigger screen resolution (in order to display pages designed for bigger screens more or less correctly).