javascript - 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
}

Answer 2

我认为您的 .menu4 左侧为 25% 的事实是这里的问题：

.menu4 {
  left: 25%;
}

更好的：

.menu4 {
  left: 0%;
  width:auto;
  margin-right:1%;
}

.menu4 ul {
  float:right;
  clear:both;
}

Answer 3

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

Answer 4

这必须通过 css 而不是使用任何脚本来完成，是的，您做得对，使容器变为 100% 的窗口大小，然后将项目放入该容器中。