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

有没有一种方法可以使

定位
的元素只使用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;}


段落和菜单之间的差距就是问题所在。它在1280p屏幕上太小，在1920p屏幕上太大。有什么方法可以使它更好地调整吗？
这必须通过css完成，而不是使用任何脚本，是的，您做得很好，使容器达到windows大小的100%，然后将项目放入该容器中。
这必须通过css完成，而不是使用任何脚本，是的，您做得很好，将容器设置为windows大小的100%，然后将项目放置在该容器中。
我认为，您的.menu4左侧为25%是问题所在：

.menu4 {
  left: 25%;
}

更好：

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

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

我认为，您的.menu4左边有25%是问题所在：

.menu4 {
  left: 25%;
}

更好：

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

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

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

div{
宽度：50vw；//表示它应该占窗口大小的50%
}
您也可以使用如下“视口”单元：

div{
宽度：50vw；//表示它应该占窗口大小的50%
}
（主题外）
&
~=
&
，
~=
很抱歉，您的小提琴到底有什么问题？演示不应该花太多时间猜测问题所在。也不应质疑解释。。。。修正什么？比如，菜单和段落之间的空间比例不太合适。在1280x1024屏幕上，间隙不存在，而在1920p屏幕上，间隙有点太大。有什么办法使它调整得更好吗？（主题外）
&
~=
&
，
~=
很抱歉，您的小提琴到底有什么问题？演示不应该花太多时间猜测问题所在。也不应质疑解释。。。。修正什么？比如，菜单和段落之间的空间比例不太合适。在1280x1024屏幕上，间隙不存在，而在1920p屏幕上，间隙有点太大。有没有办法让它调整得更好一点？必须这样做？我不认为一定要用CSS来做，一定要做吗？我不认为一定要用CSS来完成。谢谢！好发现，很好用。我会玩一会儿，看看是否一切都井然有序。谢谢！好发现，很好用。我会玩一会儿，看看是否一切都井然有序。