Javascript 调整窗口大小时重新定位绝对定位元素的最佳实践
在我的页面中有许多元素是绝对定位的。在调整窗口大小时重新调整其位置的最佳实践方法是什么（全部） 我建议最好的做法是使用CSS，如果可能的话，避免使用JavaScript。因此，尽可能避免绝对定位，并且在绝对定位时尽可能使用百分比而不是像素值，在定位要锚定到右侧的元素时，使用Javascript 调整窗口大小时重新定位绝对定位元素的最佳实践,javascript,html,css,Javascript,Html,Css,在我的页面中有许多元素是绝对定位的。在调整窗口大小时重新调整其位置的最佳实践方法是什么（全部） 我建议最好的做法是使用CSS，如果可能的话，避免使用JavaScript。因此，尽可能避免绝对定位，并且在绝对定位时尽可能使用百分比而不是像素值，在定位要锚定到右侧的元素时，使用右侧而不是左侧，在定位要锚定到底部的元素时，使用底部而不是顶部，让浏览器为你处理 例如： <!DOCTYPE HTML> <html> <head> <meta http-equiv=
右侧左侧底部顶部<!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>
调整演示页面大小
身体{
字体系列：无衬线；
}
#主持人{
位置：绝对位置；
右：0px；
最高：20%；
边框：1px纯黑；
}
#锚底{
位置：绝对位置；
底部：0px；
左：20%；
边框：1px纯黑；
}
#主播{
位置：绝对位置；
右：0px；
底部：0px；
边框：1px纯黑；
}
听着，妈，不需要JavaScript
右锚，距顶部20%
锚定底部，距离左侧20%
锚定底部和右侧
纯CSS解决方案可能并不总是可行的。在使用JavaScript时，您不仅要关注窗口大小调整事件，还要关注文本大小调整，这更令人痛苦（Google包括用于此操作的实用程序）。还要确保内置，以避免在实际调整大小操作期间过于频繁地重新定位图元。（一种简单的方法是通过将函数设置为在四分之一秒后由
setTimeoutjQuery(window).resize(function() {
jQuery('#ContainerDiv').html( jQuery('#ContainerDiv').html() );
});
尽管这可能不是最佳做法。我认为人们需要更多的信息，因为元素绝对定位的方式有很多种。不同的方式？我认为位置：绝对的，左上角可以定位它们absolute@Ajay嗯，是的；这不是我的意思：-）我的意思是，这真的取决于你的页面是什么样子。有时，事物的定位方式——即使使用“位置：绝对”——是它们将随窗口一起调整大小。有时，当窗口调整大小时，它们改变大小是没有意义的。这一切都取决于设计。@ajax：不仅是
lefttoprightbottom