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

你也可以使用我们的视频＆＃39;像这样的单位：

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”。请参考转换表并尝试。

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

4 个答案: