CSS - 缩放定位元素rel.到浏览器窗口大小

Question

有没有办法让position'ed元素只使用CSS相对于窗口大小正确缩放,或者我必须将其升级到javascript/jQ？我尝试使用100% width和添加容器,height然后相应地缩放.

.container{
    position: relative;
    width: 100%;
    height: 100%;}

.transblock{
    position:absolute; 
    width:44%; 
    height:5%; 
    top:90%; 
    left:0%; 
    background:green;
    opacity: 0.6;
    z-index:5; }

.h1text{
    position:absolute; 
    width:30%; 
    height:5%;
    top:90.75%; 
    left:13.5%; 
    z-index:10;
    color:white;}

http://jsfiddle.net/cyaXL/

段落和菜单之间的差距是问题.它在1280p屏幕上太小而在1920p上太大.有没有办法让它更好地调整？

Answer 1

您也可以像我们这样的"视口"单位:

div {
 width: 50vw; //means it should take 50% of the window size
}