如何將網頁寬度（以像素爲單位）縮放到任何屏幕尺寸？

我試圖創建一個固定寬度（970像素）的網站，並希望確保它被調整爲任何潛在的用戶屏幕尺寸，但瀏覽器會繼續顯示它以及我的整個屏幕寬度創建的頁邊距。如何將網頁寬度（以像素爲單位）縮放到任何屏幕尺寸？

目前還不清楚你問這裏。我不明白'固定寬度'和'調整到任何屏幕大小'的含義......你的意思是你想要970像素寬的佈局「放大」以填滿屏幕？或者，您希望佈局保持970像素寬，無論屏幕尺寸是多少？ – Beejamin 2011-05-27 23:41:43

是的，我寧願寬度填滿屏幕，不管它的大小。 – 2011-05-27 23:45:00

你的意思是你想要設計你的網站的固定寬度爲'970px'，但你希望瀏覽器以某種方式「放大」，以便縮放所有東西以適應瀏覽器的寬度？ – thirtydot 2011-05-27 23:59:32

您不應該設置寬度。默認情況下，頁面內容將展開以填充整個屏幕。

如果你需要找到一個元素的實際寬度，你總是可以找到。如果你使用的是jQuery，那麼它就是

var width = $("#my-element").width()

2011-05-27 23:45:06

如果明白你在找什麼，那聽起來就像你錯誤地設置了你的邊距。居中你的內容，你會希望你的代碼看起來是這樣的：http://jsbin.com/uyolo4/4/edit

2011-05-27 23:52:59 Jimmy

如果你想使你的頁面跨度寬度的100％，然後查看這篇文章： Liquid Layout

如果您正試圖集中在任何頁面寬度的固定寬度的內容簡單地使用：

margin: 0px auto;

2011-05-27 23:57:12 BentOnCoding

這不是一個液體的佈局，你後，但一個「彈性」佈局，以「自動拉伸」附加腳本。

有幾個步驟來得到這個工作：

創建使用EMS的尺寸（而不是像素尺寸）佈局。這可以使佈局「可擴展」，同時保持其比例正確。
將比例值以百分比的形式應用於<body>元素。此默認設置是有用的，因爲它設置1EM等於爲10px在幾乎所有的瀏覽器：
```
body {font-size:62.5%;} 
```
這意味着你的佈局將有97em的寬度。
使用javascript檢測用戶頁面的寬度，並調整主體上的縮放值以更改「縮放」以適合頁面。你會希望它至少運行一次，當頁面被加載時，並且可能在瀏覽器被調整大小的時候。

下面是彈性佈局一個很好的起點：http://www.alistapart.com/articles/elastic

2011-05-28 00:16:25 Beejamin

回答