支持多种设备的原型网站的工具/框架

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响应式设计。