html 5 query on auto text size

Question

my problem is all about adjusting the text size according to viewport screen resoulution so that the text will not come in two lines.. for example visit http://www.asti.inetsavy.com/rushi/

here, when you open that link,right click to know the source code.

and my css file can be downloaded when you click on index.css from the above link if you cannot download it from there download it from here

https://www.mediafire.com/?jh2q3e9dfmpvsyq

if the viewport screen resolution is different then,the top left images(home,and other two) comes in the next line and also, the navigation menu comes in two lines. so please let me know the solution

in my screen the text is good as you view in 1600*900 but in case of other resolution the user have to resize or zoom out to adjust according to his resolution.

Answer 1

You might want to check CSS media queries, it's what you need

Example:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    p {
       font-size: 13px;
    }
}

This will resize the text to 13px only on smartphones

Mozilla article on Media queries