我對Web開發相對陌生，我想知道是否有人知道如何讓一個簡單的解決方案使我正在開發的頁面動態調整窗口大小而不會扭曲佈局。我也想嘗試讓頁面居中，問題是我嘗試將它居中，但當我調整窗口大小時，頁面上的元素移動到不合適的位置。任何幫助表示讚賞。如何根據窗口大小動態調整網頁佈局的大小？
我繼續把代碼放到服務器上，這樣可以很容易地看到我主要是爲了測試。該項目是自願的，最終將被用作語言教育工具的一部分。我只是想獲得佈局，以便動態調整大小而不會扭曲佈局。
使用當前設置，如果屏幕分辨率較低，必須手動縮小以使佈局適合屏幕內部。
我目前在CSS中使用絕對定位來定位相對於背景圖片的頁面元素，它們需要被正確定位以適合背景圖案。
該頁面可以在http://www.kapacitive.com/Main_Page_Template.html查看將不得不查看頁面源代碼來查看代碼。
再一次感謝您的幫助，如果您沒有什麼有用的話，請不要回應。謝謝。
取下身體上的寬度，這些樣式設置爲你的主導航立方體：
#mainNavCubes {
position: absolute;
left: 50%;
top: 170px;
margin-left: -240px;
}
這將設置他們的位置在屏幕中間，並與切緣陰性，你可以將它們推到左。
爲了達到一定程度的動態佈局，可以使用CSS3媒體查詢：
@media (max-width: 800px) {
foo {
...
}
}
@media (max-width: 500px) {
foo {
...
}
}
他們針對特定的屏幕尺寸。
謝謝，建議。這看起來好像有很多潛在的和當前的瀏覽器支持該功能。 我只是想知道如何使用單臺機器快速輕鬆地在各種屏幕尺寸之間進行測試。 –
調整您的瀏覽器窗口;） – Blender
哈，我不知道窗口的大小，但可能是一種快速使用JavaScript查找的方法。 另外，使用這種方法只考慮窗口大小還有一種方法可以考慮屏幕分辨率或嚮導使用的一些標準經驗法則？ –
我已經找到了Web開發擴展或者Firefox或Chrome
檢查以下鏈接：
https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm
用於測量窗口和視口大小是非常有用的。它還允許您根據幾個默認尺寸設置窗口大小。
（它有其他有用的Web開發工具的整體負載爲好。）
我想補充的是，同樣的事情可能應該適用於垂直定位爲真正的中心，並且該機構應該有'MIN-寬度「設置防止從屏幕的頂部和左側邊緣溢出。 –
身體上的「最小寬度」是有道理的，否則容器重疊並且垂直定位也很好。我只是想展現一個開始。 – topek
我之前遇到的這個問題是，MainNavCubes獨立於背景移動，它應該與背景設計對齊。 –