我的页面中有很多元素。在窗口调整大小(所有这些)上重新调整其位置的最佳练习方法是什么?
答案 0 :(得分:3)
我建议最好的做法是使用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移动这些东西可能有点慢,你不想在操作期间获得的每个临时事件中执行此操作。)
答案 1 :(得分:0)
使用jQuery,您可以执行以下操作:
jQuery(window).resize(function() {
jQuery('#ContainerDiv').html( jQuery('#ContainerDiv').html() );
});
虽然这可能不是最佳做法。