Can font-size be a % of container size in css/css3?

Question

I have a container:

<div id="container"><h1>LONG TITLE LINE</h1></div>

and css:

#container {
    width: 50%;
    height: 50%;
}

#container h1 {
    font-size: XXXXXX;
}

"XXXXXX" <-- where i want the font size to be based on the width of the page/container.

---

QUESTION: is it possible to have the font-size of the h1 based on the width of the page? in css3? i'm sure it can be done using JS, but like to avoid that if it is possible.

Answer 1

I don't think it's possible in CSS, but this might be interesting to you:

http://fittextjs.com/

Answer 2

An other option dependng on your layout is to use vw units :

vw : 1/100th of the width of the viewport.(source MDN)

If your #container width is set as a percentage of the viewport, font-size will adapt to it's width :

DEMO

CSS :

#container h1 {
    font-size: 5vw;
}

Browser support for vw units is IE9+, see canIuse for more info.