下面的代码附在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
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)