在Web應用程序中支持多種分辨率的一些最佳做法是什麼？

Question

有關啓用Web應用程序以支持多種分辨率的一些最佳實踐？特別是寬屏與普通寬高比的分辨率。

它似乎並沒有一個簡單的答案 - 除了簡單地支持幾個固定分辨率和使用一些絕對定位來使佈局正常工作。

這當然更難以跨越瀏覽器。

有沒有人有這個問題的任何好資源？

Answer 1

您可以隨時嘗試使用液體佈局結構，其中元素的寬度與其瀏覽器窗口的寬度成比例。

這裏是一個很好的文章，解釋不同的佈局，包括液體佈局。

http://www.maxdesign.com.au/presentation/liquid/

PS。上述網站（maxdesign.com.au）正在使用液體佈局本身，因此在閱讀文章時請嘗試更改瀏覽器的大小。

Answer 2

您也可以使用百分比來設置寬度和高度，但這有時也很困難。

Answer 3

你這裏有兩種選擇：

1. 固定寬度佈局
2. 流式佈局

兩者都有優點和缺點，並在年底，這是一個設計決定哪個是最好的選擇。

Answer 4

一種快速，簡單，相當可靠的方法是使用框架如Blueprint或960gs來佈局網站。它們獨立於瀏覽器，因此您不必擔心這一點，並且使大多數列布局非常簡單。

他們都在爲您的內容創建一個寬度在900和1000像素之間的固定大小的容器。現在大多數人至少運行1024x768。如果您的內容需要的寬度超過此寬度，則可能是錯誤的。

〜960px可能無法工作的一個區域是手機......但這就是mobile stylesheets的目的，對吧？

Answer 5

在Opera和Safari（尤其是它們的移動版本）中，您可以使用CSS3 media queries，它允許您爲不同的屏幕分辨率聲明完全不同的樣式。

這可以在使用Javascript的其他瀏覽器中模擬 - Alistapart: Switchy McLayout