2012-01-31 63 views
4

我想知道你什麼時候編碼CSS的時候,什麼時候/爲什麼編碼固定或液體樣式表的意見?你什麼時候選擇固定的液體CSS佈局?爲什麼?

我同意固定大小的樣式表比編碼更容易/更快,因爲液體需要更多時間才能讓所有元素都很好地適應父母。

那麼,你什麼時候選擇液體超過固定(反之亦然)呢?爲什麼?

+0

很好的問題,但它可能有一個正確的答案:) – Shaheer 2012-01-31 13:51:01

回答

5

更新2我覺得現在最好的做法是設計一個網站與任何屏幕尺寸響應和適應能力。液體CSS可能沒有你想像的那樣的缺陷,比如長文本行(而不是文本位置塊即時調整) - 響應式設計的例子 - 瀏覽器端代碼,其中頁面適應任何屏幕大小:

自適應設計:主機站點服務器檢測到請求的PAG瀏覽器類型e並提供適當的頁面佈局,例如移動。這具有用戶代理標識符不總是精確的缺陷 - 例如,例如,許多瀏覽器在他們的id中包含mozilla字符串,所以依靠這些數據可能並不總是最好的。

上一頁答案

液體佈局(佈局在水平方向上收縮或延伸到適合的窗口的水平寬度)

  • 優點:內容格式化上飛充分利用 窗口寬度。這意味着選擇最流行的固定寬度的最困難的例如 940px,960px或978px不是必需的。這個 對於稍微改變 的小屏幕手持設備特別有用。在考慮所有可能的屏幕尺寸時,你必須做更少的工作。

  • 缺點:由於網站將水平縮小或拉伸到 的原因,因此無法像固定的 寬度那樣控制佈局。在您的 控件下,美觀和網站看起來不錯。你可能會發現,我的觀點是不得不做更少的工作來支持所有的屏幕寬度,畢竟這不是真的 - 因爲在這裏你正在考慮屏幕非常小並且你的菜單導航全部聚攏起來並且醜陋或者相距太遠的場景大屏幕

固定佈局(佈局是固定的,不會更改以適合可用的水平寬度)。

  • 優點:一旦你確定了最流行的寬度,例如940像素,960像素等你不需要測試網站在不同的屏幕寬度。缺點:一些用戶使用小屏幕,手持設備可能需要水平滾動才能查看您的網站,如果您的固定寬度較大。除非您也支持那些用戶可以使用的移動版

查看各大網站 - 他們使用什麼。對我來說似乎固定寬度更受歡迎,包括stackoverflow.com

這就是說,看看這個網站液:http://derekallard.com/

在這裏,開發者使用流體佈局,通過使用在每個滑動圖形層獲益其他作爲您的窗口中調整的網站寬度。

更新:沒有錯誤或正確的答案。兩者都有優點。由電視,電影和報紙進入網絡的媒體人士可能傾向於傾向於修正寬度,因爲他們熟悉那些具有這種媒體的媒體。

+0

+1用於闡述答案及其細節。謝謝 – Alex 2012-01-31 13:29:13

3

這不是技術問題,而是決策問題。 如果你(或客戶)想要液體,你選擇液體。

我自己並不想要液體。爲什麼?有了非常寬的窗口,您將獲得非常長的複印文本行,這些文本行很難閱讀。

好的還有一些其他的部分你必須考慮。您的網頁是否可以訪問?然後你必須爲放大頁面的那種做一種液體佈局。

你也可以尋找響應式網頁設計。也適用於移動瀏覽器。
http://www.alistapart.com/articles/responsive-web-design/

+0

這就是爲什麼我問,因爲我的網頁將需要訪問,我想知道是否要選擇液體 – Alex 2012-01-31 13:19:48

+0

+1 @yunzen「有一個非常寬的窗口,你會得到非常長的複製文本行,這是難以閱讀。「 – therobyouknow 2012-01-31 13:21:30

+0

如果您有可訪問的佈局,您可以選擇一個固定佈局,其中包含一些「液體部分」。要實現的是,如果用戶縮放(使用IE和FF的文本縮放)到200%,所有重要內容必須留在寬度大約爲1000px的窗口中。這不是很容易實現,並取決於您的頁面的總體佈局。 – HerrSerker 2012-01-31 13:27:03

0

通常固定佈局更容易設計和開發,訪問者也習慣於這種佈局。

流體佈局需要更多規劃,也不適合所有類型的Web應用程序。我不經常使用流體方法。

2

當有了選擇,我很少在商業風格的網絡應用程序以外的任何其他應用程序中使用液體佈局。

I.e.對於客戶在例如廣告中堅持大量水平信息的應用程序表格,我會用明顯的原因進行液體佈局。對於更多標準的網站,如果可能,我會堅持使用固定的。

當我確實爲後者流動時,我大多仍會對複製文本執行最大寬度,因爲我在政治上不是特別正確,並且使網站成爲閱讀99%訪問者的喜悅是對我來說比使它成爲一種(相對)微風使用更重要 - 只要我保持它的訪問權限即可。像yunzen說的,複製文本的行長度是非常重要的設計和可讀性。不要讓這些線條伸展到無窮遠...

大多數情況下,我的固定佈局網站將採用不同的方式來容納較小的屏幕尺寸,而不僅僅是簡單的液體拉伸 - 移動邊欄等文字下方,調整複製文本寬度以適應設備視口。有時但並非總是需要CSS媒體查詢。

(參見例如,http://www.quirksmode.org/mobile/viewports2.html

+0

+1這就是我在問這個問題時的想法,謝謝驗證 – Alex 2012-01-31 15:27:36

相關問題