Question

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

但我的解决方案有不便之处。当我调整所有内容时，事情会变得有点不合适（主要是在缩放文本时）并且很明显。我的代码非常简单，我页面中的所有内容都是绝对定位的，所以我只得到缩放因子并将其应用到页面中每个div / img / span / input的所有位置和宽度/高度。代码如下：

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));
}

过去一周，这个问题一直困扰着我。你有解决方法或解决方案吗？

Answer 1

我建议您阅读有关响应式网页设计的内容。

它可以使用％来代替精确的像素：

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

CSS ::

.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;


}

然后您也可以使用媒体查询，重新分配块或在不同宽度上应用不同的样式：

示例教程：http://css-tricks.com/css-media-queries/

动态调整网页大小

1 个答案: