支持多種設備的原型網站的工具/框架

Question

我想創建一個可以在多個設備上加載的Web門戶，主要是手機[只是android或iphone很好]和桌面瀏覽器。

我正在嘗試創建一個產品創意的原型，我做了一些研究。我想建立一個最小可行的產品，我可以給朋友使用，用於演示等，並最終迭代。

由於目前我是團隊中唯一的人/ dev [每週4小時]，這裏是我的基本要求：

1. 就應該少學習曲線，讓我得到啓動
2. 並不需要是通用的，但應滿足ATLEAST一個子集好。 [只有在瀏覽器和iphone [ipad，android手機上]纔是好的
3. 良好的社區支持和易於找到合作的人。
4. 性能不是一個大問題
5. 本機代碼或查找的是不是一個大問題
6. 我希望初級用戶是手機用戶，但手機功能有限的罰款了。
7. 我不介意拋出整個事情，並在我有一些牽引後最終以更好的方式重寫某些東西。

HTML5網頁可以加載到多個設備[？]，所以類似的東西是好的。我主要是後端開發[Java，紅寶石，數據庫，solr，lucene，memcache等]，所以我不精通Web技術[jscript，jquery，css，ajax]等，這使得這個棘手。我知道紅寶石，並且正在嘗試學習rails [學習黃瓜，水豚等]，並且我發現它非常便於用戶和原型的快速使用。

任何有助於構建此類門戶的工具/框架列表。由於我每天更多地使用紅寶石和鐵軌，所以會喜歡那種生態系統中的東西，但不是必需的。

謝謝。 PS：門戶就像是網站，不同ecommerse網站和用戶的社交信息流等接口給他們帶來一些建議小型商業[現在想的比較購物網站是精]

Answer 1

我建議你遵循responsive design方法使用CSS媒體查詢。

這樣你不用擔心任何本機或哪個設備。只關注CSS和HTML。

基本上，您使用移動第一種方法構建，然後使用媒體查詢，隨着設備屏幕尺寸的增加，您可以增強佈局（和/或功能）。

看看this list of frameworks可以提供幫助。我已經使用320以上，LESS和Amazium。選一個適合你需要的東西。

這是響應式設計中的一些common patterns。

這是一個gallery響應式設計。