如何擴展移動網站，以適應許多屏幕尺寸和設備

Question

因此，我正在開發我的第一個移動版本的網站之一，我想對我來說似乎是一個非常棘手的問題關於佈局和縮放。

如何製作在各種設備（從3.7英寸機器人到9.7英寸iPad）上看起來不錯的移動網站？

然後如何讓它在縱向和橫向上看起來不錯？

現在我使用「背景大小」的CSS3屬性設置爲「覆蓋」來縮放背景，然後使用一些JS根據屏幕大小縮放內容。

雖然我看到幾個關於這個問題的SO問題，但似乎沒有人能給我所需的見解。任何方向將不勝感激。

---

您可以在http://danielcampbell.net/RKAdler/

看看我的進度要預覽我的進步，因爲它可能看起來在移動：

打開它在您的手機或下載移動可視化工具，如Ripple extension Chrome瀏覽器

安裝完成後，轉到RK Adler站點，並通過單擊右上角的圖標@並選擇「啓用」來啓用紋波。

Answer 1

儘量避免使用像素爲主要佈局。例如，不是爲#wrapper元素定義寬度和高度，而是使用100％。這個元素中使用百分比大小的所有元素都會隨之擴展。

您應該檢查一些資源出來reponsive網頁設計，最近他們一直在彈出像muchrooms :)

查閱這些網站： Slideshow by Netlash

A great example and slideshow about it肯定檢查了他們的演示

的代碼

A google search - Google是你的朋友！