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

【问题标题】：CSS - Scaling positioned elements rel. to browser window sizeCSS - 缩放定位元素 rel。到浏览器窗口大小
【发布时间】：2013-01-20 04:00:27
【问题描述】：

有没有办法让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 屏幕上太大。有什么办法让它调整得更好？

【问题讨论】：

(offtopic) &amp ~= &amp;, <h2> ~= </h2>
抱歉，您到底遇到了什么问题？
演示不应该花很多猜测来了解问题所在。也不应该质疑解释。 ....修复什么？
例如，菜单和段落之间的空间并不能很好地缩放。在 1280x1024 屏幕上不存在间隙，而在 1920p 屏幕上它有点太宽了。任何想法如何使它调整得更好一点？

标签： javascript jquery css position scaling

【解决方案1】：

您也可以像这样使用“视口”单位：

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

【讨论】：

【解决方案2】：

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

.menu4 {
  left: 25%;
}

更好：

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

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

【讨论】：

谢谢！很好的发现，很好用。我会玩一下，看看我是否把一切都安排妥当了。

【解决方案3】：

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

【讨论】：

必须做吗？我不认为它必须用 CSS 来完成。

【解决方案4】：

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

【讨论】：