响应式网页设计示例

若要全方位测试你自己或别人的响应式网站，则需要针对每一种设备和不同的屏幕尺寸，分别准备不同的测试系统。尽管这是最完美的办法，但通过改变浏览器窗口大小其实就可以完成大多数测试。除此之外，还有很多第三方插件和浏览器扩展可供选择，通过它们可以将当前浏览器窗口或视口设定为指定像素。必要时，还可以自动将当前浏览器窗口或视口切换成为默认大小（如1024×768像素）。这样你就可以轻松地测试不同屏幕视口尺寸下的网站效果。

迷恋像素？忘了它吧！

进入了响应式网页设计的教堂，就不要再迷恋像素（px）这个度量单位，因为大多数情况下我们不会用像素，而会使用相对度量单位（em或百分比）。相对单位更方便我们审查其他响应式设计作品，查看设计的变更之处。

Internet Explorer用户请下载安装Microsoft Internet Explorer Developer Toolbar，下载地址如下：
http://www.microsoft.com/download/en/details.aspx?id=18359

如果你在使用Safari，虽然ResizeMe（http://web.me.com/aaronholla/Safari_Extensions/ ResizeMe.html）的功能类似且免费，但我最爱Resize（http://resizeSafari.com）。

Firefox用户请下载Firesizer（https://addons.mozilla.org/en-US/firefox/addon/firesizer/），Chrome请下载Windows Resizer（https://chrome.google.com/webstore/detail/ kkelicaakdanhinjdeammmilcgefonfh）。

不喜欢使用浏览器扩展？还有一个方法：我写了个简单HTML页面来显示浏览器窗口的当前视口高度和宽度。页面用了jQuery框架，获取当前的视口的高度和宽度并显示出来。你可以在浏览器新标签页中打开这个页面，调整窗口大小，然后切回你要测试的页面查看效果。这个超级简单的“What size is my viewport page?”页面地址如下：
http://benfrain.com/easily-display-the-viewport-size-of-your-page-for-responsive-designs/

视口和屏幕尺寸

视口和屏幕尺寸不是同一个概念。 视口是指浏览器窗口内的内容区域，不包含工具栏、标签栏等。也就是网页实际显示的区域。 屏幕尺寸指的是设备的物理显示区域。需要注意的是有些浏览器调整工具显示的尺寸包含浏览器的其他元素，诸如地址栏、标签栏和搜索栏，而有些工具则不是这样。在下面的截图中，实际的视口尺寸显示在右上角（1156×921像素），同时Firesizer插件将窗口尺寸显示在右下角（1171×1023像素）。

现在，我们带着所有需要的工具，开始鉴赏最好的响应式网站。启动你钟爱的浏览器，打开浏览器调整工具，访问http://thinkvitamin.com/ 。

如果你的视口宽度大于1060像素，你会看到如下图所示的布局：

如果你的视口宽度介于930像素到1060像素之间，你会看到如下图所示布局：

注意看logo旁边的主导航菜单是如何变化的。主内容区右侧的图标一个挨着一个排列，界面上的一切都合理可用，最重要的是，没有一样从屏幕上溢出。现在让我们再看看视口宽度小于880像素的效果，截图如下：

头部的效果基本没变，但注意右侧的侧边栏还是变窄了一些。图标排成了2行2列，同时文本块做了适当调整，其中的文本流相应地发生变化。

不过，将视口宽度减小到小于600像素，你就会发现一个重大的变化，如下图所示：

怎么样？整个侧边栏对我们的新视口做出了响应，网站最重要的内容区占据了整个浏览器窗口宽度。注意看头部的导航链接现在是水平排列的，而不是被放在logo的旁边。另外，logo本身的大小也做了调整。以上所有的这些变化有助于根据视口尺寸为用户创建更好的体验。

让我们来看看另一个例子：http://2011.dconstruct.org/。视口较宽时（大于1350像素）网站效果如下图所示：

请特别注意那9张图的排列格式。当你减小视口宽度时（小于960像素），注意看界面发生了什么变化。三行三列的图片排列方式变成了三行两列外加下方一行三列，如下图所示：

继续减小视口宽度，在小于720像素的时候我们会遇到另一个设计“断点”。头部导航链接转换成了带图片的导航区域，这为触屏导航提供了更好的操作区域：

继续减小视口宽度，当小于480像素时，图片排列方式又变成了第一行2张图片，第二行3张，第三行4张。这些图片的大小在视口宽度缩小至大约300像素时又发生了变化。下面的截图显示了其在iPhone上的效果：

推荐一个响应式设计创意收集网站：http://mediaqueri.es。虽然这里收集的网站并不是全部都采纳完整的响应式方法论，即先针对小视口进行设计，然后逐步针对大视口进行渐进增强支持。但就目前来看，响应式设计方法兴起的时间不长，再考虑到响应式网页设计的各种可能性，这里确实有很多能让我们汲取创意的范例。尽管调整视口大小来浏览网站能说明响应式网页设计的理念，但这没有展示出HTML5的优势。HTML5的优势事实上在幕后发挥。所以让我们将注意力转移到幕后，来了解一下HTML5的优秀之处。

摘自《响应式Web设计：HTML5和CSS3实战》

作者：zuoninger 发表于2012-11-19 10:55:28 原文链接

阅读：39 评论：0 查看评论