Can I shrink or expand text according to browser resolution

Question

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.

Answer 1

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).

Answer 2

CSS3 defines the unit vw which is suitable for this purpose. vw is 1% of the viewport's width, which can make it hard to guess the right size. However, it's extremely useful for sizing text over a scalable background image, for example.

Use it like any of the more familiar units, e.g.

h1 { font-size:3vw; }
p, li { font-size:1.5vw; }

You can also couple it with a media query to provide a minimum text size.

The CSS3 spec defines other relative size units:

‘rem’: font size of the root element
‘vw’: 1% of viewport's width
‘vh’: 1% viewport's height
‘vmin’: 1% of viewport's smaller dimension
‘vmax’: 1% of viewport's larger dimension