The Autoscaling Web

fixed design in a responsive way

1) Choose a default font-size on the html-tag that responds to the viewport width by using the vw scaling:

html { font-size: 5vw; }

2) Define all other fonts based on the html tag by using the rem scaling. 1rem == same size as the html tag.

body { font-size: 1rem; }
h1 { font-size: 2rem; }

3) fix chrome with this tiny javascript

if(window.chrome !== undefined) {
    var all = document.querySelectorAll(‘*’);
    window.onresize = function() {
        [].forEach.call(all, function(item) {
            item.style.zIndex = 1;
        });
    };
}

4) … profit?

btw, use rem for all the non-textual sizes, then, too. it’ll be all relative to the root chosen size.

and as an additional one:

5) you can then still use responsive queries to resize and adapt as needed, like this

@media (min-width: 700px) {
    html { font-size: 3vw; }
}
@media (min-width: 1300px) {
    html { font-size: 2vw; }
}

I used this on app.conesoft.net, so you can explore it there for demonstration purposes:

http://app.conesoft.net