is it possible to have text resize as the browser gets smaller, css

is there a way to have text resize as the browser gets smaller for liquid based design in percentages.

images divs etc, all rescale but text percentage scaling its not possible! setting开发者_JAVA技巧 it in percentages just changes the unified em setting for that text - in every browser width identicaly.

Other than using media queries at specific intervals, I'm not really sure.

The way I would do it:

.content {
    font-size:16px;
}

@media all and (max-width: 800px) {
    .content {font-size:14px;}
}

@media all and (max-width: 600px) {
    .content {font-size:12px;}
}

@media all and (max-width: 400px) {
    .content {font-size:10px;}
}

No javascript, pure CSS.

I believe this is exactly what you were looking for:

http://css-tricks.com/viewport-sized-typography/

Yes, it is possible to resize text by handling the onResize event with JavaScript code. There are quite a few issues with onResize, though, including debouncing, which can get complicated.

I know this isn't part of your question, but I wonder if it's a good idea to resize text. After all, the user has already told the browser s/he's happy with the text at its current size. Is it really all that friendly to override the user's manifest preference?