Font Size defined by DIV width

Hello folks,
I have a little problem I need a helping hand with…

I have a DIV element that contains a line of text, the DIV element can stretch horizontally to fill the space it is within.

I would like to change the font size of the text inside the DIV element, on the basis of the width of the DIV element.

eg: If the DIV element is 300 to 400 pixels wide, the font size will be 10px. If the DIV element is 401 to 500 pixels wide, the font size will change to 12px. etc…

How would I go about this?

I’ve been googling the subject, and the info I find comes back with the @media attribute, but that refers to the device or screen, not the size of an individual DIV element. So I am a little confused, as I’m not really a web developer, just a Graphic Designer who knows a little HTML/CSS.

So any help, would be predicated.