最佳網頁寬度及其實作

1.

設計網頁的時候，确定寬度是一件很苦惱的事。

一張網頁要在大小如此懸殊的各種螢幕上，都呈現令人滿意的效果，難度可想而知。舉例來說，一張400px寬的圖檔，在800px的螢幕上會占據50%的寬度，而在1920px的螢幕上（windows vista的流行設定），隻占據20%。

2.

目前，常見的螢幕分辨率寬度大概有6種：800px，1024px，1280px，1440px，1680px和1920px。其中，1024px最常見，但是随着大螢幕顯示器的流行，更高的分辨率正變得越來越多。

常見的解決方法有兩種：

第二種：采用彈性布局（fluid width layout），實作網頁寬度的自适應。

第一種方法的優點是，可以根據不同螢幕分辨率，采用完全不同的布局，缺點是要設計和維護多張樣式表，比較麻煩。第二種方法隻采用一張樣式表，比較省事。

3.

首先，網頁的預設寬度，确定為滿足1024px寬度的顯示器。這不僅因為1024x768是現在最常見的分辨率，還因為這個寬度對網頁最合适：1）它放得下足夠的内容，足夠三欄的布局；2）單行文字不宜太長，1024px已是極限，否則容易産生閱讀疲勞；3）在目前的網際網路帶寬條件下，網頁難以采用大分辨率所要求的大尺寸圖檔。

其次，網頁寬度會在780px-1260px的範圍内，自動變化，即最小不小于780px，最大不超過1280px。

最後，對于更大的分辨率，網頁内容會自動居中。

4.

下面就是css檔案的寫法，隻要4行。需要注意的是，這幾行的語句都針對整個頁面，即body标簽或者最外層的那個div區域。

margin: 10px auto;

這一行保證了網頁在任何分辨率下，都會居中。

min-width: 780px; max-width: 1260px;

這二行規定了網頁的最小和最大寬度。注意，ie6不支援這二行，即它們在ie6中是無效的。

width:expression(document.body.clientwidth < 782? "780px" : document.body.clientwidth > 1262? "1260px" : "auto");

這一行是針對ie6的解決方法。它采用了css表達式，也可以通過javascript實作。

另外，如果想讓内層的各個區塊也自動伸縮，它們的寬度可以采用百分比的形式，比如：

#div-left{ width:50%; } #div-right{

5.

最後，建議大家平時使用計算機的時候，不要盲目采用高分辨率，意義不大。

（完）