2010-11-05 75 views
3

我正在學習如何設計一個網站。其中一個決定似乎是如何向用戶呈現數據,即存在不同的顯示器尺寸,是否構造數據以佔據整個屏幕(又名GMail)或使其固定寬度,即選擇標準顯示器尺寸( 1024x768),並使其在所有顯示器(又名StackOverflow)中顯示相同。(固定寬度)vs(可變寬度)網站設計

我傾向於可變寬度設計,我想了解的是這個設計決策對編程有什麼影響?即當我使用可變寬度設計編程網站時(具體來說,CSS使用情況),我需要記住什麼?

+2

可能的重複[是流動網站值得嗎?](http://stackoverflow.com/questions/1413602/are-fluid-websites-worth-making-anymore) – 2010-11-05 11:47:21

+0

個人而言,我更喜歡固定寬度的網站,在至少我知道這將在每個解決方案中大體相同:) – Kyle 2010-11-05 12:16:14

回答

2

我不是一個設計師,但我正在爲我自己的網站做一個設計,我目前正在建造。把下面所說的一切用大量的鹽加以說明。

我認爲你使用哪種寬度的風格在很大程度上取決於你有什麼樣的內容以及它的舒展程度。

Gmail實際上作弊(<div>元素的寬度在JavaScript中被重新定義,當窗口寬度發生變化時),但原則上這種設計是有效的,因爲側邊欄是已知數量且動態內容包裝良好。這意味着他們可以以固定的寬度投入側邊欄,然後使用邊距來確保中間的內容不與這些側邊欄重疊。如果內容變得太大,它會簡單地包裝到下一行,沒有人在意,因爲它通常是自由格式的文本。如果您的網站在其主要內容塊中發生了很多事情,而內容溢出其容器真正存在危險,則可能的寬度可能不是正確的調用。有專家可以使這些類型的設計工作,但如果你剛開始,你可能不想嘗試。我試過了,它只讓我感到沮喪。

固定設計更容易。我把它比作只是在一張紙上畫一個設計。基本上,你知道紙張的大小(因爲你明確地指定了它),所以當你繪製一個盒子時,你會發現它不會與它旁邊的盒子重疊,因爲你也知道你在哪裏畫出另一個盒子並將它放在哪裏成爲。你只是傾向於更加絕對地控制事物最終在頁面上呈現的位置。

需要注意的是,你需要知道你選擇的字體大小並不總是被使用的。用戶可以更改瀏覽器使用的默認字體大小,使其大於您的預期,從而導致您的內容再次脫離其框。我傾向於解決這個問題的方式是經常使用我的瀏覽器純文本縮放功能測試設計,並確保字體增加3-4倍時確保一切看起來合理。

就選擇您的「標準顯示器尺寸」而言,現在常見的做法是將您的網站寬度定義爲960像素。這是關於一個1024像素寬度的視口的正確大小,一旦你在瀏覽器鑲邊(例如垂直滾動條)。如果有許多用戶仍然可能使用800x600分辨率,請改爲使用760像素的設計。仍然有人建議您確保您的關鍵內容適合760像素以防萬一,並將剩餘的200像素用於不太關鍵的內容。

希望能有所幫助。

0

在代碼方面,如果您仔細考慮,其實並沒有太大的區別。我個人認爲最好的選擇是兩者的結合:創建一個外部包裝,然後將其中的所有元素設置爲百分比值。這樣,無論您決定在最外層包裝上使用百分比還是固定寬度,內部總是可以很好地縮放。儘管我通常對最外層的包裝使用固定寬度,但我仍然使用百分比寬度編碼內部元素(大多數是反正,除了必須具有固定寬度的元素外)。如果客戶想要一個全寬網站,這只是一個改變單一價值的問題。

我認爲最終,這只是個人喜好的問題,無論是你的還是你的客戶。

希望這會有所幫助。