This script is a work in progress.

In a nutshell:

Media queries are great. They are especially effective when building responsive websites. But they can be difficult to work out so that they cover every scenario. Media queries work especially well when your elements don’t need to have a fixed height, like with articles. But when your elements need to be a fixed height, what do you do then?

It’s a shame that the percent option with font-size isn’t a percent of the enclosing element – as percent works in other situations. So here’s a solution I came up with.

It’s a work in progress. One known “feature”, if you are relying on hidden objects overflowing this will reduce the font size until it is 1px making it illegible. Also, if you are relying on overflow hidden, this will mess with that as well.

Even though it is incomplete I’d like to get it out there for sake of the general conversation. Please share your thoughts, improvements below.