下面我们来看几个真正的响应式设计的例子 …
你可以使用你的电脑，平板，或者手机打开这个网站 … 看一下它们之间的区别 … 或者，我们可以直接来调整这个窗口的宽度 ….
现在页面上的内容会分成四栏 … （#缩小）
当窗口宽度到一定程度的时候 … 页面的布局会发生变化 … 由原来的四栏 … 变成了两栏 …
继续缩小窗口的宽度 ….
在更小的窗口上 … 布局又会有变化 … 会变成一栏 …. （恢复）
再看一下这个网站 … foodsense.is …
在大尺寸的 屏幕上，左上角会显示网站的标志，它的下面有一个导航菜单 … 右边是一个幻灯片 …
主体的内容分成了四栏 …
缩小一下窗口的宽度 …. 到达一定宽度的时候 … 整个布局的宽度会缩小 …
标志和导航菜单会跑到页面的最上面 …. 下面是幻灯片和主体内容 …
继续缩小 ….
现在 … 导航菜单上的小图标会隐藏起来 … 布局宽度也会缩小 … 主体内容变成了两栏 … （继续缩小）
在更小的窗口上 … 页面又会有一些变化 …
导航菜单会在页面的最上方 …. 主体内容会变成一栏 ….
最后再来看一下索尼公司的网站
这回我们从小窗口开始 ….
页面顶部的左边是标志，右边有两个小图标 … 点击 menu .. 可以打开导航菜单 … 点击搜索会打开搜索框 …
下面是一个大的产品的介绍 .. 然后是一个小的产品介绍 …
中间这里，会有一个选择列表 …. 可以切换显示内容 …
放大页面窗口的宽度 ….
现在， 页面布局宽度会增大 ，会直接显示出导航菜单和搜索框 …
下面的选择列表，会变成选项卡的形式 …
继续放大宽度 ….
布局会变得更宽 … 左边展示一个主要产品，在同一排，会展示一个次要的产品 …
下面的主体内容的布局，也会有一些变化 ….
总结
看完这几个例子，你大概会对响应式设计有一个了解 ….
想去找到灵感的话，你可以看一下这个网站 … 上面收集了一些不错的响应式设计的网站 …
