如何实现在调整浏览器窗口大小时可缩放的网页？
如何实现在调整浏览器窗口大小时可缩放的网页？
我可以使用表格或者CSS浮动部分来布局页面的元素，但是我希望在调整浏览器窗口大小时重新调整显示大小
我有一个使用AJAX PRO和DIV并带有overflow：auto和onwindowresize钩子的有效解决方案，但这很麻烦。有没有更好的办法？
- 谢谢大家到目前为止的回答，我打算尝试所有(或者至少大多数)它们，然后选择最佳解决方案作为此主题的答案。
- 使用CSS和百分比似乎效果最好，这就是我在原始解决方案中所做的；使用能见度：将div的隐藏div设置为100％x 100％可以测量窗口的客户区域(否则IE则很难)，而onwindowresize javascript函数可让AJAXPRO方法在调整窗口大小以重绘时弹出新分辨率下的布局单元内容
编辑：我的道歉不完全清楚；我需要一个"液体布局"，其中主要元素("窗格")将随着调整浏览器窗口的大小而缩放。我发现调整大小后必须使用AJAX调用来重新显示"窗格"内容，并保持溢出：自动打开以避免滚动
解决方案
而不是在CSS中使用"宽度：200像素"，而应使用"宽度：50％"之类的东西
这使得它使用了所有内容的50％，因此在以下情况下：
<body> <div style="width:50%"> <!--some stuff--> </div> </body>
div现在将始终占据水平窗口的一半。
除非我们在这里有特定要求，否则我不确定为什么在这里需要JS。表格布局是在html中进行流畅布局的一种简单(古老的方法)，但是具有CSS的div布局也允许流畅布局，请参见http://www.glish.com/css/2.asp
是的，听起来像我们想要查看流畅的CSS布局。
有关此的资源，仅Google流畅的CSS布局，应该给我们提供很多检查的内容。
也可以看看前面的问题，以获取一些好的指导。
还有一些需要考虑的事情是，在调整窗口大小时，JavaScript不会连续更新，因此会有明显的延迟/波动。使用流畅的CSS布局，屏幕元素将几乎立即更新，以实现无缝过渡。
我见过的最好的方法是使用YUI CSS工具，然后对所有内容使用百分比。 YUI网格允许各种固定宽度或者流体布局，其列大小指定为可用空间的一部分。有一个YUI Grids Builder可以进行布局。 YUI字体为我们提供了良好的字体大小控件。有一些不错的备忘单，可以向我们展示如何进行布局以及有用的事情，例如为这么多像素的字体大小指定百分比。
当浏览器窗口调整大小时，这可以使我们缩放位置，但可以缩放整个站点，包括字体大小。我认为我们为此必须编写某种浏览器插件，这意味着解决方案将不可移植。如果我们在Intranet上，这还不错，因为我们可以控制每个客户端上的浏览器，但是如果我们想要一个可在Internet上访问的网站，则可能需要重新考虑UI。
这实际上取决于我们要实现的网页。通常，我们将需要100％CSS。调整将包含文本的元素的大小时，请记住倾向于使用面向文本的大小，例如em，ex和px。
如果我们不熟悉CSS，那么浮动会很危险。我并不陌生，他们仍然让我感到困惑。尽可能避免使用它们。通常，我们只需要修改正在处理的div或者元素的display属性。
如果我们执行所有这些操作并在其他困难处搜寻网页，则不仅浏览器可以调整页面大小，还可以通过调整文本大小来缩放页面。基本上，做对了，设计就牢不可破。我已经看到它是在复杂的布局上完成的，但是这需要大量的工作，并且在某些情况下需要为编写网页进行大量的工作。
我不确定我们要为谁做这个网站是(乐趣，利润，两者)，但我建议我们多加考虑，以平衡CSS的纯度以及一些技巧，以提高效率。网站是否需要100％可访问的业务？不？然后拧紧。先做我们需要做的事情，才能赚钱，然后放纵自己的热情，尽一切可能做更多的事情。
在尝试了本书的解决方案之后，我陷入了Firefox或者IE中的不兼容问题。因此，我做了一些修改，并提出了这个CSS。如我们所见，边距是所需大小的一半，为负数。
<head><title>Centered</title>
<style type="text/css">
body {
background-position: center center;
border: thin solid #000000;
height: 300px;
width: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-right: auto;
margin-bottom: auto;
margin-left: -300px;
}
</style></head>
希望能有所帮助
使用百分比！假设我们有一个"主窗格"，页面的所有内容都位于该"主窗格"上。我们希望它始终位于窗口中心，并且是窗口宽度的80％。
只需执行以下操作：
#centerpane {
保证金：自动；
宽度：80％;
}
多田
感谢所有建议！看来我必须要做的丑陋事情。 IE和FireFox中的以下作品(无论如何在我的机器上)。我稍后可能会为CodeProject.com撰写一篇文章；-)
<script type="text/javascript">
var tmout = null;
var mustReload = false;
function Resizing()
{
if (tmout != null)
{
clearTimeout(tmout);
}
tmout = setTimeout(RefreshAll,300);
}
function Reload()
{
document.location.href = document.location.href;
}
//IE fires the window's onresize event when the client area
//expands or contracts, which causes an infinite loop.
//the way around this is a hidden div set to 100% of
//height and width, with a guard around the resize event
//handler to see if the _window_ size really changed
var windowHeight;
var windowWidth;
window.onresize = null;
window.onresize = function()
{
var backdropDiv = document.getElementById("divBackdrop");
if (windowHeight != backdropDiv.offsetHeight ||
windowWidth != backdropDiv.offsetWidth)
{
//if screen is shrinking, must reload to get correct sizes
if (windowHeight != backdropDiv.offsetHeight ||
windowWidth != backdropDiv.offsetWidth)
{
mustReload = true;
}
else
{
mustReload = mustReload || false;
}
windowHeight = backdropDiv.offsetHeight;
windowWidth = backdropDiv.offsetWidth;
Resizing();
}
}
</script>
此javascript在<head>部分中：
<body onload="RefreshAll();">
<div id="divBackdrop"
style="width:100%; clear:both; height: 100%; margin: 0;
padding: 0; position:absolute; top:0px; left:0px;
visibility:hidden; z-index:0;">
</div>
<body>开始像这样：
DIV向左浮动以进行布局。我必须将高度和宽度的百分比设置为仅占全部金额的百分比(例如99.99％，59.99％，39.99％)，以防止浮标被包裹，这可能是由于DIV上的边框所致。
var isWorking = false;
var currentEntity = <%=currentEntityId %>;
//try to detect a bad back-button usage;
//if the current entity id does not match the querystring
//parameter entityid=###
if (location.search != null && location.search.indexOf("&entityid=") > 0)
{
var urlId = location.search.substring(
location.search.indexOf("&entityid=")+10);
if (urlId.indexOf("&") > 0)
{
urlId = urlId.substring(0,urlId.indexOf("&"));
}
if (currentEntity != urlId)
{
mustReload = true;
}
}
//a friendly please wait... hidden div
var pleaseWaitDiv = document.getElementById("divPleaseWait");
//an example content div being refreshed via AJAX PRO
var contentDiv = document.getElementById("contentDiv");
//synchronous refresh of content
function RefreshAll()
{
if (isWorking) { return; } //no infinite recursion please!
isWorking = true;
pleaseWaitDiv.style.visibility = "visible";
if (mustReload)
{
Reload();
}
else
{
contentDiv.innerHTML = NAMESPACE.REFRESH_METHOD(
(currentEntity, contentDiv.offsetWidth,
contentDiv.offsetHeight).value;
}
pleaseWaitDiv.style.visibility = "hidden";
isWorking = false;
if (tmout != null)
{
clearTimeout(tmout);
}
}
var tmout2 = null;
var refreshInterval = 60000;
//periodic synchronous refresh of all content
function Refreshing()
{
RefreshAll();
if (tmout2 != null)
{
clearTimeout(tmout2);
tmout2 = setTimeout(Refreshing,refreshInterval);
}
}
//start periodic refresh of content
tmout2 = setTimeout(Refreshing,refreshInterval);
//clean up
window.onunload = function()
{
isWorking = true;
if (tmout != null)
{
clearTimeout(tmout);
tmout = null;
}
if (tmout2 != null)
{
clearTimeout(tmout2);
tmout2 = null;
}
最后，在内容部分之后，另一个用于管理刷新的javascript块：
丑陋，但我认为它确实很重要；-)
使用ems。 jontangerine.com和simplebits.com都是令人惊讶的例子。进一步阅读Jon Tan撰写的《使用CSS实现难以置信的Em和弹性布局》
/**** Page Rescaling Function ****/
function resizeWindow()
{
var windowHeight = getWindowHeight();
var windowWidth = getWindowWidth();
document.getElementById("content").style.height = (windowHeight - 4) + "px";
}
function getWindowHeight()
{
var windowHeight=0;
if (typeof(window.innerHeight)=='number')
{
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight)
{
windowHeight = document.documentElement.clientHeight;
}
else
{
if (document.body && document.body.clientHeight)
{
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
<body onresize =" resizeWindow()" onload =" resizeWindow()">
页
</身体>
我目前正在研究的解决方案需要对宽度进行一些更改，否则到目前为止，高度都可以正常工作^^
段落数量不匹配
