根据浏览器高度和宽度保持纵横比和字体大小？

下面的代码附在window.onresize = resize;. The baseWidth and baseHeight在负载上读取作为计算的基础。这main变量只需将其设置到主 html 节点即可定义。字体设置在块元素上会导致所有的em基于其中的元素以实物方式调整大小。当浏览器的宽度或高度更改时，会重新计算该比率。请参阅演示以了解我使用 JS 实现的效果，但想找到一个纯 CSS 解决方案：http://codepen.io/anon/pen/nLauF http://codepen.io/anon/pen/nLauF

我一直在探索 CSS3 中的选项，例如calc。请随意对下面的 JS 提出任何改进建议。

             function resize() {
                var height = 0,
                    width = 0;

                if(window.innerWidth <= window.innerHeight) {
                    size = window.innerWidth / baseWidth;
                    height = baseHeight * size;
                    width = window.innerWidth;

                } else {
                    size = window.innerHeight / baseHeight;
                    height = window.innerHeight;
                    width = baseWidth * size;
                }

                if(baseWidth * size > window.innerWidth) {
                    size = window.innerWidth / baseWidth;
                    height = baseHeight * size;
                    width = window.innerWidth;
                }

                main.style.height = height + "px";
                main.style.width = width + "px";
                main.style.fontSize = size * 16 + "px";
            }

Thanks!

我编写了这段代码，包括字体大小计算最小体积单位 https://developer.mozilla.org/en-US/docs/Web/CSS/length :

DEMO http://jsfiddle.net/webtiki/890e1194/

CSS :

main {
    width: 80vmin;
    height: 60vmin;
    background-color: #000;
    position: absolute;
    top:0; bottom:0;
    left:0; right:0;
    margin:auto;
}
h1 {
    color: #fff;
    font-size: 30px; /* general fallback */
    font-size: 5vm; /* IE9 fallback */
    font-size: 5vmin;
}

对于浏览器支持，您可以检查canIuse http://caniuse.com/#feat=viewport-units