0

我正在将我的 HTML 页面设计为完全流畅：

对于标记 (HTML) 中的每个元素，我使用的是 'style="height: %;width: %"'（而不是 'style="height: *px;width: *px"'）。

这种方法似乎工作得很好，除了在更改窗口尺寸时，在这种情况下，网页元素会改变它们的位置并最终“相互叠加”。

我想出了一个很好的运行时（java-script）解决方案：

var elements = document.getElementsByTagName("*");
for (var i=0; i < elements.length; i++)
{

    if (elements[i].style.height) elements[i].style.height = elements[i].offsetHeight+"px";
    if (elements[i].style.width ) elements[i].style.width  = elements[i].offsetWidth +"px";
}

剩下的唯一问题是，如果用户通过将 URL 输入到非最大化窗口中来打开网站，那么页面会适合窗口的该部分。然后，当最大化窗口时，页面保持在其先前的测量值中。所以本质上，我已经解决了最初的问题（当改变窗口尺寸时），但只有当窗口最初处于最大尺寸时。

关于如何解决这个问题的任何想法？（鉴于我想保持我的“％页面设计”不变）。

4

1 回答 1

0

我认为真正的答案是“完全流畅的设计”并不是“只对所有事物使用百分位测量”的同义词。您将需要考虑：

  • 当窗口改变大小时每个特定元素应该做什么
  • 调整屏幕大小时，某些元素可能需要出现/消失
  • 元素应该可能指定最小和最大宽度
  • 在小型（例如 480x800 移动设备）显示器上会发生什么？
  • 在大型（例如 2560x1600 显示器）显示器上会发生什么？

……除其他外。没有通用的解决方案，您可以将其应用于每个元素以使流体设计工作。

于 2012-10-30T05:02:29.210 回答