动态调整网页大小

我正在开发一堆小的web应用程序，有一个未知的窗口大小为目标。为了解决这个问题，我正在开发非常大的布局，并根据窗口大小缩放它们。

然而，我的解决方案有一个不便之处。当我调整所有东西的大小时，事情变得有点不合适(主要是在缩放文本时)，这是显而易见的。我的代码非常简单，我的页面中的一切都是绝对定位的，所以我只是得到缩放因子，并将其应用于页面中每个div/img/span/输入的所有位置和宽度/高度。代码如下:

function resize()
{
    var wh = $(window).height();
    var h = maxHeight;
    var ww = $(window).width();
    var w = maxWidth;
    var wProp = ww / w;
    var hProp = wh / h;
    if (wProp < hProp) prop = wProp;
    else prop = hProp;
    if (prop > 1) prop = 1;
    console.log(prop);
    $("div").each (applyNewSize);
    $("img").each (applyNewSize);
    $("span").each (applyNewSize);
    $("input").each (applyNewSize);
}
//this is run when the page is loaded
function initializeSize (i)
{
    this.oX = $(this).position().left;
    this.oY = $(this).position().top;
    this.oW = $(this).width();
    this.oH = $(this).height();
    if ($(this).css("font-size") != undefined)
    {
        this.oFS = Number($(this).css("font-size").split("px")[0]);
    }
}
function applyNewSize (i)
{
    if (this.oFS != undefined) $(this).css("font-size", Math.round(this.oFS * prop) + "px");
    $(this).css("left", Math.round(this.oX * prop) + "px");
    $(this).css("top", Math.round(this.oY * prop) + "px");
    $(this).width(Math.round(this.oW * prop));
    $(this).height(Math.round(this.oH * prop));
}

这个问题在过去的一个星期里一直困扰着我。你有什么变通办法或解决办法吗?

 <div class="container"> 
  <section>
    THIS IS THE SECTION
  </section>
</div>

.container{
  width: 80%; // 80% instead pixels
  background: gainsboro;
  border: 3px inset darkgrey;
  height: 200px;
  margin:auto;
  text-align:center;
}

section{
  width: 80%; // 80% instead pixels
  height: 80%; // 80% instead pixels
  background: darkgrey;
  margin:auto;

}