Responsive design 响应网页设计：百分比/HTML5样板/960GS或基础框架？

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

我目前正在阅读Ethan Marcotte的《响应式Web设计》一书，我正在学习如何使用百分比，当我必须使用他的公式设置维度时：Target/Context=Result（基本上是内容和容器之间的比例）。我认为这是一个制作灵活网站的好方法。伊桑·马科特（Ethan Marcotte）指出，响应性网站应具备3个要素：

基于网格的灵活布局

灵活的图像和媒体

媒体查询

我认为这是实现这一目标的好办法

---

• 除了这个理论和手工制作的CSS之外，在不同的浏览器中可能会有不同的元素显示。我已经试过Css reset和Normalize.Css，我现在正在使用，我更喜欢它。我想试试HTML5样板，它也集成了Modernizer。你推荐它吗

最近有越来越多的网格系统（甚至Adobe Dreamweaver CS6也实现了一种使用Acj.js创建流体布局网格的方法。有什么好处？）我想从Zurb尝试960个网格系统或基础。我知道960GS有不同版本的流体布局，不管怎样，现在对于流体布局来说是更好的吗？
最后，有可能将HTML5模板与960GS或基础结合起来，有意义吗？

---

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

Dreamweaver CS6提供了许多工具，用于创建灵活流畅的布局。我建议您使用960网格系统，而且DW还提供了一个工具，用于以不同的屏幕大小预览您的网页（您可以在网页右下角的状态栏中找到此工具）

我几乎可以肯定，这将有助于您：

---

P>我用我的最新项目Zurb基金会。它提供了我所需要的一切。随着笔记本和台式机屏幕的分辨率不断提高，我发现限制在960像素的网格也已成为过去，因为在大屏幕上，它们只覆盖50%（或更少=这就像在1024px屏幕上使用480px布局）！有了基础，你可以轻松地扩大，如果你调整你的字体大小相应。我现在通常升到1440

---

既然你还没试过，我建议你现在真的试一下，你的问题一眨眼就会消失。我建议你从Bootstrap开始，因为当你这样做的时候，你可能永远不会考虑尝试其余的。< / P>谢谢。我已经在webdesign.tutplus.com上看到了这个教程，它可能会很有用，我将再次阅读并尝试。不管怎样，960网格系统更好吗？可能是的。我问了3个问题，上面有一个无序的列表。我想知道所有问题的答案@维多利亚：我不确定你的另外两个问题。但是，如果这对你有帮助的话，请不要忘记对我的答案投赞成票。是的，我不会忘记。与此同时，我在等待其他答案。关于HTML5 BoilerPlate：如果你没有必要的时间制作自己的模板，我会向你推荐它，基本上是因为当你编写自己的模板时，你可以完全控制它。是的，我认为你是对的。HTML样板可能提供CSS文件或JS库等资源，其中包含许多项，我可能只需要其中的一小部分，无论如何，它们在提供与旧浏览器的兼容性方面特别有用，尤其是Internet Explorer，因为它们是许多优秀网站设计人员和开发人员工作的产物。（我喜欢使用许多现代功能，但不幸的是，并非所有浏览器都支持这些功能）@维苏里还没有使用Zurb基金会，但我正在考虑尝试。我同意你的观点，考虑到当今屏幕的尺寸，960像素的网格更大。正如我之前对另一位回答我问题的人所说的，如果可能的话，请详细说明与html5样板的可能集成。是否可行和方便@j-kleinsorry，我从来没有使用过HTML样板，当它们实际上都针对同一个问题时，为什么要将它们结合起来？顺便说一句，你有没有看过Twitter上那些家伙的Bootstrap？嗯……他们可能针对同一个问题，但他们相互补充。例如，Html5样板文件不仅包含css，还包含javascript库，这些库至少部分用于为旧浏览器提供更好的兼容性。我喜欢使用许多现代的css3功能，不幸的是，旧的甚至是相对较新的浏览器（如InternetExplorer8、9、甚至10）都不支持这些功能@IGweI知道Bootstrap，我听说它对移动设备也很好，我还是要尝试一下，不管怎样，如果我在UI中使用它们的功能，这是最好的。我也是