Question

我的页面中有很多元素。在窗口调整大小（所有这些）上重新调整其位置的最佳练习方法是什么？

Answer 1

我建议最好的做法是使用CSS执行此操作，如果可能的话，请避免使用JavaScript。因此，尽可能避免绝对定位，并且当定位绝对使用百分比而不是像素值时，在定位要锚定的元素时使用right而不是left，使用bottom而不是top当你想要的元素定位到底部等等时。例如：让浏览器为你处理它。

示例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Resize Demo Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
#anchorRight {
    position: absolute;
    right: 0px;
    top: 20%;
    border: 1px solid black;
}
#anchorBottom {
    position: absolute;
    bottom: 0px;
    left:  20%;
    border: 1px solid black;
}
#anchorBoth {
    position: absolute;
    right: 0px;
    bottom: 0px;
    border: 1px solid black;
}
</style>
</head>
<body>
<p>Look, Ma, no JavaScript required.</p>
<div id='anchorRight'>Anchor right, 20% from top</div>
<div id='anchorBottom'>Anchor bottom, 20% from left</div>
<div id='anchorBoth'>Anchor bottom and right</div>
</body>
</html>

纯CSS解决方案可能并非总是可行。使用JavaScript时，您不仅需要观看窗口调整大小事件，还需要观看文本调整大小，这更令人痛苦（Google的Closure library包括用于执行此操作的实用程序）。还要确保内置hysteresis以避免在实际调整大小操作期间过于频繁地重新定位元素。（一种简单的方法是通过设置一个函数在四分之一秒后设置setTimeout并且记住计时器句柄来响应调整大小;如果在调用函数之前得到另一个resize事件，则取消更早的计时器并设置一个新的。你可以设置一个你推迟调整大小的最大次数你继续[显示临时更新]，但因为用JavaScript移动这些东西可能有点慢，你不想在操作期间获得的每个临时事件中执行此操作。）

Answer 2

使用jQuery，您可以执行以下操作：

jQuery(window).resize(function() {
    jQuery('#ContainerDiv').html( jQuery('#ContainerDiv').html() );
});

虽然这可能不是最佳做法。

在窗口调整大小时重新定位绝对定位元素的最佳实践

2 个答案: