在窗口上重新定位絕對定位元素的最佳實踐調整大小

我的許多元素絕對位於我的頁面中。重新調整窗口大小調整（所有這些）的最佳實踐方法是什麼？在窗口上重新定位絕對定位元素的最佳實踐調整大小

2010-03-09 Ajay

我認爲人們會需要更多的信息，因爲有很多不同的方式可以將元素完全定位。 – Pointy 2010-03-09 12:16:24

不同的方式？我認爲位置：絕對與頂部和左側將他們絕對定位 – Ajay 2010-03-09 12:19:04

@Ajay以及是的;這不是我的意思:-)我的意思是，這取決於你的網頁是什麼樣子。有時候，事物定位的方式 - 即使是「位置：絕對」 - 也是他們會隨窗口一起調整大小。有時，當窗口調整大小時，它們沒有任何意義。這完全取決於設計。 – Pointy 2010-03-09 12:26:41

我建議最好的做法是用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並記住計時器句柄;如果在函數被調用之前得到另一個調整大小事件，則取消較早的計時器並設置一個新的，你可以設置一個最大次數你推遲調整大小，然後再繼續[顯示臨時更新]，但由於用JavaScript移動這些東西可能有點慢，你不想在每臨時事件在操作過程中獲得）

來源

2010-03-09 12:20:55

+1：我只會提醒開發者應該檢查一下距離視口邊緣的百分比距離是否是他真正想要的。 – Robusto 2010-03-09 13:27:30

@Robusto：哦，絕對。我只在示例中使用了百分比來證明一個*可以*。這可能會玷污這一點... – 2010-03-09 13:28:31

使用jQuery，你可以做到以下幾點：。

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

雖然它可能不是最好的做法。

來源

2011-01-14 16:11:06 jfk

在窗口上重新定位絕對定位元素的最佳實踐調整大小

回答

相關問題