網頁設計中對網頁寬度的研究

眾所周知，標準網頁設計一般不能出現橫向滾動條，這是由網頁美觀，易用性等多方面決定的。

而現在主流設計還都是針對800*600解析度設計的。在這可憐的800畫素寬裡，設計師既要考慮到最大限度表現出文字與，還要為了美觀來美化**、增加質感和效果。真可謂是每畫素必爭（至少我是這樣），所以經常會有朋友問，到底800*600解析度下，想要不出現橫向滾動條，網頁到底可以做多寬？

答案很簡單：779畫素。（在800*600解析度下，windows外觀為系統預設，ie視窗最大化，頁面屬性左右兩側邊距為0畫素）

為什麼呢，其實很簡單，看看下面幾張圖就明白了。

圖一：windows預設情況下，滾動條寬度為17畫素。

此主題相關如下：

圖二：windows預設情況下，活動視窗邊框寬為1畫素，但是windows為了增加效果，會再有1畫素寬的陰影，所以一共是2畫素。

此主題相關如下：

圖三：根據上面可以得出，右側視窗邊框2畫素+滾動條17畫素=19畫素，再加上左側視窗邊框一共是21畫素。

此主題相關如下：

而剩餘的就是視窗內容了，所以可以輕鬆得出，內容寬度=800-21=779畫素寬。

圖四：在瀏覽器中實際測試，779寬度不產生橫向滾動條。

此主題相關如下：

圖五：而增加780寬的**，橫向滾動條就出來了。

此主題相關如下：

具體設計時，一般為了考慮內容居中和方便計算，大多採用雙數，所以778是最佳尺寸。知道這個的原理，1024或1280的也都可以輕鬆算出來了。

1、在ie6.0下，寬度為顯示器解析度減21，比如1024的寬度-21就變成1003。但值得注意的是ie6.0(或更低)無論你的網頁多高都會有右側的滾動條框。

2、在firefox下，寬度的分率辨減19。比如1024的寬度-19就變成1005

3、在opear下，寬度的分率辨減23。比如1024的寬度-23就變成1001

注：firefox或opear在內容少於瀏覽器高度時不顯示右側滾動條。

所以如果是1024的解析度，你的網頁不如設成1000安全一點。如果是800的解析度一般都設成770。

這些需要明白並且牢記，不然很可能做出來的東西不符合瀏覽器要求。不過一般我們都回設定的再稍微小一點，應為有些瀏覽器加了外掛程式或者其他的東西寬度會有變化，所以800的解析度一般設定760左右；1024的設定990左右。