Responsive Font Sizing

Question

I been trying to think of a way to change the font size as the parent element sizes changes. Most likely this would be due by the browser size being changed. Such as when I make my Chrome smaller the font will become smaller as well as well as vice versa.

I was thinking media queries, but it also wasn't suiting what I exactly want. Media queries great for detecting what device being used and all, but not how I want it to be. I was thinking the answer lies in some kind of JavaScript, but if there was an answer that uses CSS I would prefer that. I've done some research, but couldn't find exactly what I wanted.

Answer 1

You can use mediaqueries. i use this for my test :

@media all and (max-width:2700px) {html {font-size:50px;transition:1s;}}
@media all and (max-width:2000px) {html {font-size:45px;transition:1s;}}
@media all and (max-width:1600px) {html {font-size:30px;transition:1s;}}
@media all and (max-width:1200px) {html {font-size:25px;transition:1s;}}
@media all and (max-width:1100px) {html {font-size:22px;transition:1s;}}
@media all and (max-width: 900px) {html {font-size:18px;transition:1s;}}
@media all and (max-width: 700px) {html {font-size:15px;transition:1s;}}
@media all and (max-width: 500px) {html {font-size:12px;transition:1s;}}
@media all and (max-width: 300px) {html {font-size: 8px;transition:1s;}}

Size chosen might not be the best, the transition is to avoid jumping size to size while resizing window.

Have fun !

Answer 2

All plugins are crap. Just try using simple css for it.

Example:

@media screen and (min-width: 1200px){
font-size:80%;
}

@media screen and (max-width: 768px){
font-size:90%;
}

@media screen and (max-width: 320px){
font-size:80%;
}

They will be flexible on each and every viewport. Hope this helps you.