CSS -根据浏览器窗口大小缩放定位元素

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

你也可以像这样设置"viewport"单位:

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

Answer 2

我认为。menu4的左距为25%是问题所在:

.menu4 {
  left: 25%;
}

更好:

.menu4 {
  left: 0%;
  width:auto;
  margin-right:1%;
}
.menu4 ul {
  float:right;
  clear:both;
}

Answer 3

这必须通过css完成，而不是使用任何脚本，是的，你正在做的是正确的，使容器达到100%的窗口大小，然后在该容器中放置项目

Answer 4

字体大小以像素为单位。请尝试用"em"。在使用%进行布局时，我们需要使用"em"而不是"px"。请参考换算表并尝试。