响应式设计的真实例子

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

国庆活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

下面我们来看几个真正的响应式设计的例子 …

http://colly.com/

你可以使用你的电脑,平板,或者手机打开这个网站 … 看一下它们之间的区别 … 或者,我们可以直接来调整这个窗口的宽度 ….

现在页面上的内容会分成四栏 … (#缩小)

当窗口宽度到一定程度的时候 … 页面的布局会发生变化 … 由原来的四栏 … 变成了两栏 …

继续缩小窗口的宽度 ….

在更小的窗口上 … 布局又会有变化 … 会变成一栏 …. (恢复)

http://foodsense.is

再看一下这个网站 … foodsense.is …

在大尺寸的 屏幕上,左上角会显示网站的标志,它的下面有一个导航菜单 … 右边是一个幻灯片 …

主体的内容分成了四栏 …

缩小一下窗口的宽度 …. 到达一定宽度的时候 … 整个布局的宽度会缩小 …

标志和导航菜单会跑到页面的最上面 …. 下面是幻灯片和主体内容 …

继续缩小 ….

现在 … 导航菜单上的小图标会隐藏起来 … 布局宽度也会缩小 … 主体内容变成了两栏 … (继续缩小)

在更小的窗口上 … 页面又会有一些变化 …

导航菜单会在页面的最上方 …. 主体内容会变成一栏 ….

最后再来看一下索尼公司的网站

http://sony.com/

这回我们从小窗口开始 ….

页面顶部的左边是标志,右边有两个小图标 … 点击 menu .. 可以打开导航菜单 … 点击搜索会打开搜索框 …

下面是一个大的产品的介绍 .. 然后是一个小的产品介绍 …

中间这里,会有一个选择列表 …. 可以切换显示内容 …

放大页面窗口的宽度 ….

现在, 页面布局宽度会增大 ,会直接显示出导航菜单和搜索框 …

下面的选择列表,会变成选项卡的形式 …

继续放大宽度 ….

布局会变得更宽 … 左边展示一个主要产品,在同一排,会展示一个次要的产品 …

下面的主体内容的布局,也会有一些变化 ….

总结

看完这几个例子,你大概会对响应式设计有一个了解 ….

想去找到灵感的话,你可以看一下这个网站 … 上面收集了一些不错的响应式设计的网站 …

响应式设计的真实例子《 响应式网页设计 》

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点