响应设计的技巧，秘诀和最佳实践

除非你现在正处在世外桃源，否则你不可能没有听说过web设计者间最近广泛流行的响应设计（Responsive Design）。Ethan Marcotte使用responsive design这一术语描述一种新兴的技术，它采用易变的布局和媒体查询扩展网站，使得网站能够动态适应各种尺寸大小的屏幕。如果你之前从未听说过响应设计，那么你可以好好读读Marcotte的介绍文章。

简而言之，响应设计就是使用非固定的网格、非固定的布局和@多媒体查询使得现在的（以及将来的）web能够适应不同尺寸的屏幕。无论你的用户使用的是一个电话，一个iPad或是巨大的台式显示器，你的网站都能够适应。

响应设计将成为一个非常有吸引力的工具，正如Luke Wroblewski所说的，设计需要遵循移动优先原则。也就是，从小屏幕开始考虑。先理清你的网站的核心，然后一点点开始构建。从骨架开始构建能够保证网站的质量，促使开发人员关注用户所关注的问题。

你打算如何构建一个响应良好的网站呢？这个问题因人而异，但是还是存在一些通用的方法的。为了帮助你开始响应设计，这里列出了一些初期设计时的最好实践经验，都是从大量的web资源中总结出来的：

• 使用@media控制你的屏幕布局，但是需要记住，只有这些并不是一个真正的响应设计。
• 使用非固定的布局适应各种屏幕的尺寸。不要将你的设计限制在iPhone或是Android上，不要将它切割为平板电脑版本和桌面电脑版本。布局设计需要更加灵活可变，否则，如果某个新的屏幕尺寸突然变成潮流，你的网站将无法应对。
• 根据你的网站的具体内容设定你的网格。封装好的网格系统可能并不适用于你的应用。这类网格的最大问题就是它们可能与你的具体内容不符。根据网站内容设计你的布局，而不是根据canvas（或是网格）。
• 从小屏幕开始。从最新的屏幕开始设计，然后逐步在浮动元素中加入@media规则，满足更大的平板或是桌面浏览器的窗口需要。从一个窄的单列布局开始设计移动浏览器网站，然后再逐步扩大。
• 使用Respond或是CSS3 Media Queries这类JavaScript库引导@media查询，因为在旧版本的浏览器中可能不支持直接的@media查询。从最小的屏幕开始然后逐步扩大意味着，桌面浏览器需要处理@media，确保使用Respond这类辅助工具能够支持旧版本的浏览器处理@media。
• 不要指望Photoshop，在浏览器中构建你的组件。使用Photoshop构建动态的布局压根就没有可能性，应该在浏览器中实现。
• 使用img { max-width: 100%; }控制图像大小。对于大规模的图像，可以考虑在小屏幕中使用Responsive Images这类工具缩小图像的大小，然后在大屏幕中使用JavaScript还原大图像。
• 延迟下载。可能你的网站中有些辅助元素，能够优化你的网站，但并不是必须的。这类元素可以在下载完基本内容后再使用JavaScript加载这些元素。
• 不用处处要求完美。即使做到了上述建议，你可能还是会漏掉某些使用不支持JavaScript的旧版本浏览器的用户。现在这样的用户已经越来越少了，如果他们在桌面浏览器中看到了移动版本的布局，这也并不就是世界末日。你的网站已经具备很好的可用性了。

记住响应设计是一个非常年轻的概念——是一个新的工具——每天都会涌现出一些新的东西。不要将上面的建议当做是一些硬性或是速成的规则，它只是一些引导指南罢了。

 

文章来源：Tips, Tricks and Best Practices for Responsive Design

 

译文来源：http://www.webapptrend.com/

 WebAppTrend是一个独立的技术博客，关注Web App前瞻和实践，以及智能浏览器发展 

请大家在关注ITeye的同时，关注我们的新浪微博 @WebAppTrend，关注我们的腾讯微博@WebAppTrend，欢迎加入我们的Q Q群：193775364