Adaptive media queries?

Here is an example of a CSS3 media query:
@media only screen and (max-width: 600px) {
body {
font-size: 10px;
}
img {
width: 400px;
}
}
But I want the size of something to scale based on the viewport. But rather than having a separate media rule for every pixel value, I want to do something like this:
@media only screen and (max-width: var x) {
body {
font-size: (x / 10)px;
}
}

That's not exactly what I want to do, but I want shit to scale smoothly, instead of only at a couple specified widths. If you have a shitton of media queries, it can degrade performance. Would I have to use JavaScript instead of CSS3 for this?

You can use % or rem or Bootstrap, but that's not quite what I want to do.

Please avoid the use of CSS and just serve plain text instead, thanks.