响应式网页设计：百分比/html5 样板/960gs 还是 Foundation 框架？

Question

我有使用 HTML5 和 CSS3 以 px 表示的固定尺寸构建静态网站的经验。我过去常常手工编写 CSS，这可能是最好的方法（结合使用 SASS 和 Compass，我仍然需要学习）。现在我必须实现一个新网站，并且我正在尝试制作一个灵活的布局，该布局可以很好地显示在桌面和移动设备上任何浏览器大小的任何主要浏览器（Internet Explorer、Firefox、Opera、Safari）上。我现在更关心桌面分辨率，但如果它在移动设备上看起来也不错，那就更好了。

我目前正在阅读 Ethan Marcotte 的《响应式网页设计》一书，并且我正在学习当我必须使用他的公式设置维度时使用百分比：目标 / 上下文 = 结果（基本上是内容和容器）。我认为这是制作灵活网站的好方法。 Ethan Marcotte 所说的响应式网站应该包含 3 个要素：

1. 基于网格的灵活布局；
2. 灵活的图像和媒体；
3. 媒体查询。

我认为这是实现它的好方法。

---

• 除了该理论和手工制作的 CSS 之外，在不同的浏览器中可能会有不同的元素显示。我已经尝试过我目前正在使用并且我更喜欢的 Css 重置和 Normalize.css。我想尝试集成 Modernizr 的 HTML5 样板。你推荐它吗？

• 最近有越来越多的网格系统（甚至 Adob​​e Dreamweaver CS6 也使用 respond.js 实现了一种创建流体布局网格的方法。有什么好处吗？）我正在考虑尝试 960 网格系统或 Foundation祖尔布。我知道流体布局有不同版本的 960gs，无论如何 Foundation 现在更适合流体布局？

• 最后是否可以将 HTML5 Boilerplate 与 960gs 或 Foundation 结合起来，是否有意义？

我已经阅读了与这些主题相关的问题和答案，但它们通常只针对一件事。我想对所有这些事情有一个全局的看法，并对如何进行提出建议。提前谢谢大家了。

Answer 1

无论 960gs 提供什么，Bootstrap 和 Foundation 都会提供更多。也就是说，Bootstrap 和 Foundation 都已经包含了基于网格的布局以及响应性选项。

也就是说，我建议您仔细查看 Bootstrap 和 Foundation，然后进行自己的比较。选择提供您更喜欢的功能的那个。如果您的工作井井有条，那么两者中的一个就足够了。

既然你还没有尝试过，我建议你现在真的去做，你的问题会在一瞬间消失。而且我建议你从 Bootstrap 开始，因为当你这样做时，你可能永远不会考虑尝试其余的。

Answer 2

Dreamweaver CS6 提供了许多用于创建灵活流畅的布局的工具。我推荐你使用960网格系统，DW也提供了一个预览你的网页在不同屏幕尺寸下的工具（你可以在网页的状态栏找到这个，在右下角）

我几乎可以肯定这会对您有所帮助：

http://webdesign.tutsplus.com/tutorials/applications/getting-started-with-dreamweaver-cs6-fluid-grids/

Answer 3

我在所有最新项目中都使用 Foundation by Zurb；它提供了我需要的一切。随着笔记本电脑和台式机屏幕的分辨率越来越高，我发现限制为 960 像素的网格也已成为过去，因为在大屏幕上它们仅覆盖 50%（或更少 = 这就像在 1024 像素上使用 480 像素布局一样）屏幕）！使用 Foundation，如果您相应地调整字体大小，您可以轻松地变宽。我现在通常会涨到1440。