动态调整网页大小答案

【问题标题】：Resizing a web page dynamically动态调整网页大小
【发布时间】：2013-05-21 16:51:01
【问题描述】：

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

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

【问题讨论】：

我似乎记得 Google Closure 编译器的页面有一个 javascript 控制的页脚。即它是根据窗口大小定位的。我猜你可能会看到比他们更糟糕的例子。 closure-compiler.appspot.com/home
请阅读“响应式设计”。其中许多问题已经得到解决。
你不使用媒体查询有什么原因吗？和尺寸在 em 中？以及任何其他响应式最佳做法？
@Bartdude 感谢您的回复，我研究了响应式网页设计，我想知道媒体查询是否与 IE8 兼容（这是我的应用程序的要求之一）。我的字体大小已经是 em，但它是如何工作的？
为什么不主要使用 CSS 进行动态设计，而在需要时只使用 javascript 进行少量修正。根据经验，使用最小宽度/最大宽度的百分比或 EM 样式比 javascript 更可靠。您可以轻松地使用 CSS2 进行动态布局（IE7 也支持）

标签： javascript html web

【解决方案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/

【讨论】：