javascript CSS - 缩放定位元素 rel。到浏览器窗口大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14421554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - Scaling positioned elements rel. to browser window size
提问by Spectre
Is there a way to make position'ed elements scale correctly relative to the window size using only CSS or I got to step it up to javascript/jQ? I tried adding a container with 100%widthand heightand then scale accordingly.
有没有办法position只使用 CSS使'ed 元素相对于窗口大小正确缩放，或者我必须将其升级到 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;}
The gap between the paragraph and the menu is the issue. It's too small on 1280p screen and too large on 1920p. Is there any way to make it adjust better?
段落和菜单之间的差距是问题所在。它在 1280p 屏幕上太小，在 1920p 屏幕上太大。有什么办法可以让它更好地调整吗？
采纳答案by Carol McKay
I think the fact that you have the .menu4 with a left of 25% is the problem here:
我认为您拥有 .menu4 左侧为 25% 的事实是这里的问题：
.menu4 {
left: 25%;
}
better:
更好的：
.menu4 {
left: 0%;
width:auto;
margin-right:1%;
}
.menu4 ul {
float:right;
clear:both;
}
回答by Behnam Azizi
You can as well us 'viewport' units like this:
您也可以像我们这样使用“视口”单元：
div {
width: 50vw; //means it should take 50% of the window size
}
回答by Renjith
You are using font size in pixel. Please try with "em". while doing the layout with %, we need to used "em" instead of "px". please refer the conversion table and try.
您正在使用以像素为单位的字体大小。请尝试使用“em”。在使用 % 进行布局时，我们需要使用“em”而不是“px”。请参考转换表并尝试。
回答by TaLha Khan
This must be done through css and not with any scripts and Yes your are doing it right, making the container go 100% of windows size then placing items in that container.
这必须通过 css 而不是任何脚本来完成，是的，您做得对，使容器变为 100% 的窗口大小，然后将项目放入该容器中。
