响应式网站布局入门 [关闭]答案

【问题标题】：Getting started with responsive website layout [closed]响应式网站布局入门 [关闭]
【发布时间】：2014-03-11 04:10:24
【问题描述】：

我需要创建一个响应式布局，但我对如何开始感到困惑。我查了一下，发现了很多资源，但都是非常压倒性的。有人可以指出我如何开始的正确方向吗？我可以建立一个 html/css 网站，但从未在移动方面做过任何事情。

几个问题： 1) 我读过你应该为移动设备构建然后向上移动，这是正确的吗？

2) 我应该从模板开始（或网格，这是正确的术语吗？）如果是，有什么建议吗？（我找到了一些，但显然由于缺乏代表我无法发布链接）这是布局的基本设置：http://oi57.tinypic.com/2en0rdf.jpg

3) 你能推荐一些必须的教程或工具吗？

4) 测试布局的最佳方法是什么？我遇到了几个（由于没有代表而无法发布链接

5) 我读过关于人们使用 bootstrap 的文章，但我在过去的项目中使用过它，它似乎有点臃肿。虽然，这可能是一个很好的起点？

谢谢。

【问题讨论】：

欢迎来到 Stack Overflow！请注意，此类问题通常会被标记为基于意见的问题，因为没有真正的正确答案。
尝试一次选择一件事（例如导航）并在小层次上学习，找出你能做什么并在此基础上进行扩展。在响应式开发中你可以做很多事情，大量的框架（bootstrap 是一个很好的框架），记住它是双向的，现在有超过 2000 像素宽的屏幕以及移动分辨率。 Hongkiat 有一个非常好的教程列表 - 见hongkiat.com/blog/responsive-web-tutorials

标签： css html twitter-bootstrap responsive-design

【解决方案1】：

让我试着为你解释一下：

我读过你应该为移动设备构建然后向上移动，这是正确的吗？有些人从较小的设备开始到最大的设备（手机到桌面），但这不是必须的。如果您已经对响应式网站的编码进行了深入学习，则可以从大到小开始。但是从小屏幕到大屏幕背后的原因是，如果您的页面适合小屏幕，那么更容易使其适合更大的屏幕。所以你首先关注小。
我应该从模板开始吗？如果是这样，有什么建议吗？取决于你，如果你不想让你的手脏编码很多元素来满足你的要求，你可以使用模板。但为了更好地理解，您可以使用没有 UI 样式的网格 CSS 框架，例如 simplegrid 或 unsemantic 960。
您能推荐一些必须的教程或工具吗？我不确定我是否可以推荐。但是要研究一下，买一些书，开始练习，如果遇到岩石，请向专家寻求帮助。
测试布局的最佳方法是什么？如果您使用 netbeans IDE 进行编码，他们已经内置了带有分辨率选项（桌面和移动）的测试器，或者来自浏览器插件，在 Firefox 上，您可以使用开发工具包并按 Ctrl + Shift + M 来激活屏幕模拟器。如果你在 chrome 上，你可以使用名为 Ripple 的扩展，它有很多设备作为模拟器。
我读到过有人使用引导程序，但我在过去的项目中使用过它，它似乎有点臃肿。虽然，这可能是一个很好的起点？任何 CSS 框架都很好，但最著名的是 Bootstrap & Zurb Foundation。

祝你好运，

【讨论】：

【解决方案2】：

1) 我听说你应该为移动设备构建然后向上移动，这是正确的吗？

是的，将复杂的桌面布局转换为更简单的移动布局要比反之困难得多。

2) 我应该从模板开始（或网格，这是正确的术语吗？）如果是，有什么建议吗？（我找到了一些，但显然由于缺少代表我无法发布链接）这是布局的基本设置：http://oi57.tinypic.com/2en0rdf.jpg

是的，首先我强烈建议您使用像 Bootstrap 或 Foundation 这样具有响应式网格的框架。

3 && 4) 你能推荐一些必须的教程或工具吗？测试布局的最佳方法是什么？我遇到了几个（由于没有代表而无法发布链接

最好的工具是浏览器，您可以慢慢调整大小并在调整大小时观察元素如何重新排列。还有一些网站会以不同的设备宽度显示您的页面。例如http://quirktools.com/screenfly/。

5) 我读过关于人们使用 bootstrap 的文章，但我在过去的项目中使用过它，它似乎有点臃肿。虽然，这可能是一个很好的起点？

是的，Bootstrap 或 Foundation 或任何其他框架都是一个很好的起点。看看他们如何做响应式布局并从中学习。

【讨论】：

【解决方案3】：

1：我为 1080p 宽屏构建并向下移动。我认识的每个人都有不同的看法。

2：你可以做一个模板，但你不需要一个。一般来说，模板使事情变得更容易，但限制了您对网站的控制和灵活性。

3：两个免费的：

http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

http://www.palantir.net/blog/scalable-navigation-patterns-responsive-web-design

4：使用媒体查询，您可以通过调整浏览器大小来进行初始测试，这很棒。最终的移动测试需要使用模拟器或实际的智能手机来完成。您还需要决定是否要支持 4.0 之前的 Android。

另一个很好的资源是http://browsershots.org/。它是免费的，可以在各种浏览器中向您展示您的网站。

5：引导程序...第 2 部分的含义相同。使您的生活更轻松，但限制了灵活性。

【讨论】：