注意看logo旁边的主导航菜单是如何变化的。主内容区右侧的图标一个挨着一个排列，界面上的一切都合理可用，最重要的是，没有一样从屏幕上溢出。现在让我们再看看视口宽度小于880像素的效果，截图如下：
 |
头部的效果基本没变，但注意右侧的侧边栏还是变窄了一些。图标排成了2行2列，同时文本块做了适当调整，其中的文本流相应地发生变化。
不过，将视口宽度减小到小于600像素，你就会发现一个重大的变化，如下图所示： 广州网站建设
 |
怎么样？整个侧边栏对我们的新视口做出了响应，网站最重要的内容区占据了整个浏览器窗口宽度。注意看头部的导航链接现在是水平排列的，而不是被放在logo的旁边。另外，logo本身的大小也做了调整。以上所有的这些变化有助于根据视口尺寸为用户创建更好的体验。
让我们来看看另一个例子：http://2011.dconstruct.org/。视口较宽时（大于1350像素）网站效果如下图所示： 广州网站设计
 |
