Unable to make font size responsive

Question

I am trying for an hour now and I am am unable to make the font size inside some columns(bootstrap). Here's a fiddle that shows what's happening.

Is there any way that I can make that responsive?

Here's the CSS that I am using to make it responsive:

@media only screen and (max-width: 450px) {
    .digit {
        font-size: 1em;
    }
}

But it's not working. :/

Answer 1

I've made a plugin for that : https://github.com/kagagnon/Responsive-Font

Once you include it, you must set your query point in JavaScript :

{
    queryPoint : font-size
}

For example :

rf('.digit').setQueryPoint({ //rf() = CSS selector.
    450 : 12,
    1500 : 40
})

http://jsfiddle.net/Pm2nh/5/

Of course, you need to adjust the value for your needs.

Answer 2

If you are only worried about modern browsers (which most mobile browsers fall under) you can use the Viewport Width (vw) measurement. It's a percentage of the viewport's (Device's) width. Example with 3% width of the viewport. Resize the window and hit Run again.

http://jsfiddle.net/KA5qQ/

For more info, check our Chris Coyier's blog post on it.

<div id="myDiv">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

CSS

#myDiv {
    font-size: 3vw;
}