我需要创建一个响应式布局，但我对如何开始感到困惑。我抬头找了很多资源，但这一切都非常令人难以招架。有人能指出我如何开始正确的方向吗？我可以建立一个html / css网站，但从未做过任何与移动相关的事情。
几个问题： 1）我读过你应该为移动设备构建然后向上移动，这是正确的吗？
2）我应该从模板（或网格）开始，这是正确的术语吗？）如果是这样，任何建议？ （我找到了一些，但显然由于缺乏代表我无法发布链接） 这是布局的基本设置：http://oi57.tinypic.com/2en0rdf.jpg
3）你能推荐一些必备的教程或工具吗？
4）测试布局的最佳方法是什么？我遇到过一对夫妇（因为没有代表而无法发布链接
5）我读过关于使用bootstrap的人，但我在过去的项目中使用过它，看起来有点臃肿。虽然，这可能是一个很好的起点？
谢谢。
答案 0 :(得分：1)
1）我读过你应该为移动设备构建然后向上移动，这是正确的吗？
是的，采用复杂的桌面布局并将其转换为更简单的移动布局要比反之亦然。
2）我应该从模板（或网格）开始，这是正确的术语吗？）如果是这样，任何建议？ （我找到了一些，但显然由于缺乏代表我无法发布链接）这是布局的基本设置：http://oi57.tinypic.com/2en0rdf.jpg
是的，首先，我强烈建议您选择具有响应式网格的Bootstrap或Foundation框架。
3＆amp;＆amp; 4）你能推荐一些必须的教程或工具吗？测试布局的最佳方法是什么？我遇到过一对夫妇（因为没有代表而无法发布链接
最好的工具是一个浏览器，您可以慢慢调整大小并观察元素在调整大小时的重新排列方式。还有一些网站将以不同的设备宽度显示您的页面。例如http://quirktools.com/screenfly/。
5）我读过关于使用bootstrap的人，但我在过去的项目中使用过它，看起来有点臃肿。虽然，这可能是一个很好的起点？
是的，Bootstrap或Foundation或任何其他框架都有一个很好的起点。看看他们如何做响应式布局并使用它来学习。
答案 1 :(得分：1)
让我试着为你解释一下：
我读过你应该建立移动设备然后向上移动，这是正确的吗？有些人从较小的设备开始到最大的设备（从手机到桌面），但这不是必须的。如果您已经深入学习编码响应式网站，那么您可以从大到小开始。但从小到大屏幕开始背后的原因是，如果您的页面适合小屏幕，那么它更容易适应更大的屏幕。所以你首先关注的是小。
我应该从模板开始吗？如果有，任何建议？依靠你，如果你不想让你的手脏编码很多元素，以满足你的要求，你可以使用模板。但为了更好地理解，您可以使用没有UI样式的网格CSS框架，如simplegrid或unsemantic 960。
您能推荐一些必备的教程或工具吗？我不确定我能推荐。但是做研究，买一些书，开始练习，如果遇到摇滚石，可以向专家寻求帮助。
测试布局的最佳方法是什么？如果您使用netbeans IDE进行编码，他们内置了具有分辨率选项的测试仪（桌面和移动），或者从浏览器插件，在Firefox上您可以使用Developer Kit并按Ctrl + Shift + M来激活屏幕模拟器。如果您使用chrome，则可以使用名为Ripple的Extension，它有许多设备作为模拟器。
我读过关于使用bootstrap的人，但我在过去的项目中使用过它，看起来有点臃肿。虽然，这可能是一个很好的起点？任何CSS框架都很好，但最着名的是Bootstrap＆amp; Zurb基金会。
祝你好运，
答案 2 :(得分：0)
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：Bootstrap ......同样的含义适用于第2部分。让您的生活更轻松但限制了灵活性。
