4

我正在开发一堆以未知窗口大小为目标的小型 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));
}

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

4

1 回答 1

1

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

它可以将 % 替换为确切的像素：

 <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/

于 2014-01-24T16:09:46.750 回答