首页 > 建站资源 > 网站运营 > 什么是响应式网页设计?

什么是响应式网页设计?

时间:2012-04-28    来源:腾讯GDC

响应式网页设计,这个概念在国外相当火热。不管是交互设计,视觉,前端开发都投入到这个老意识新概念的技术当中。

首先我们看下什么是响应式网页设计。它为用户从他们的电脑切换到iPad、iPhone、黑莓、HTC、平板电脑等等,该网站能自动切换适应的分辨率,图像大小和脚本。换句话说,该网站能自动响应用户的喜好。通俗点说法就是有求必应的网页!

它不仅仅是一种趋势,而是一个新的设计解决方案!它有助于解决不同的分辨率和设备(台式电脑,笔记本电脑,平板,手机)相关的设计问题。

前面说了,其实这个是一个设计问题,既然是设计的问题,这里就会涉及到很多层面的角色,包括交互设计师,视觉设计师,前端工程师,后台开发工程师。交互设计师,要满足各自不通分辨率和设备的页面布局展现方式。而视觉设计师,则要考虑到页面性能和移动端带宽问题,权衡下页面的酷炫效果和视觉色彩的运用。而前端和后台开发工程师,则要完成满足视觉需求和交互功能,更要考虑到页面加载性能和消耗带宽问题,更重要的是移动端安全性能方面!

下面我们来做一个简单的响应式网页。Demo预览

大家可以用Chrome缩小下浏览器窗口看看页面布局是如何变化的。当然,你通过手机来查看页面布局效果更佳。

我们做响应式网页,首先必须要满足桌面各个浏览器版本下正常显示页面。其次才考虑以webkit为内核的手机终端浏览器效果。由于IOS和Android浏览器都是webkit内核的,这里的响应我们就不考虑ie9以下版本的浏览器了。

这个例子我们是以GDC博客为原型。它默认一个固定宽度为980px的网页,当浏览器窗口比980px小的时候,这个布局就变为100%比宽度的液态布局,而不是固定宽度。当浏览器窗口再缩小于650px的时候,我们就隐藏侧边栏。当窗口小于480的时候,横向导航条隐藏,换成点击下拉效果的导航条。

如上图,从左至右依次为移动版本—>平板电脑—>桌面浏览器的效果。

首先,我们来看下html结构

这个是一个很典型的博客模版结构。一个wrapper容器包含了头部、内容、侧栏、底部。

下面我们针对移动设备加入这个meta标签。告诉webkit内核浏览器初始缩放比例为1。(很多iOS和Android的浏览器都是基于webkit内核的)

<meta name="viewport" content="width=device-width; initial-scale=1.0">

在这个页面中用了html5文档声明,用到了很多html5标签,但是这些标签在ie9以下版本是不支持的,所以我们必须引用一个html5.js文件使得这些标签被其它低版本浏览器确认。

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

在这里我不想讲到正常页面下的布局如何写了。主要讲解下媒体查询media queries这个css的设计思路。这个是css3的属性,也是我们这个响应式网页设计的最有趣,最重要的部分。

<link href="media_queries.css" rel="stylesheet" type="text/css">

下面我们用CSS3的媒介查询(Media Query)特性使得网页适应不同设备,即根据设备的分辨率和缩放自动重新布局。

@media screen and (max-width: 480px) {
这里就是重新设定一些css的属性
}

当浏览器窗口小于980px的时候

#wraper { width: 95%;}重新设定容器宽度为95%
#content { width: 60%; padding: 3% 4%;}重新设定内容宽度为60%
#sidebar { width: 30%;}重新设定侧边栏宽度为30%

这里用到了%,使得页面是一个流体布局。

当浏览器窗口小于650px的时候

#content { width: auto;float: none;margin: 20px 0;}
#sidebar { display:none; width: 100%; margin: 0; float: none; }

容器宽度继承了上面95%的宽度,这个时候我们设定内容宽度为自动,使其填满外部的wraper容器。并清除其浮动样式。这个时候的浏览的页面,可以权衡下右边侧栏的重要程度,如果觉得有必要继续在页面中显示,我们可以清除其浮动,并把宽度也设为100%,这样就在content这个容器下显示。但是一般的话,在这么小的浏览窗口中,用户只想看到最主要的内容,右边侧栏成为了一个补助模块,那么可以直接把它隐藏掉。这样可以减少页面的高度。

当浏览器窗口小于480px的时候,一般这个就是iPhone的横向宽度。

首先我们设计webkit内核浏览器下禁用文字大小调整

html { -webkit-text-size-adjust: none; }

其实在480px宽度下的时候,整体框架布局已经不用设置,我们考虑得更多是怎么把一个良好的页面布局展示给用户。而在这个模式下,如果导航条有很多选项的时候,就会相互堆叠换行,那么这里我们设计成点击出下拉菜单形式。

这里我们首先考虑在小设备窗口下header太高已经占据了大半的屏幕显示,所以这里我们重新设定下header的高度,能完整呈现出这个站点logo就可以了。在480px小设备窗口下浏览,页面内容会很长,这个时候我们要在底部加个返回页面顶部的按钮。

关于弹性图片,我们这里用到了简单的 img { max-width: 100%; }。但是有个问题,如果图片过大会影响其加载速度,更会造成对存储空间的浪费。当然,这里有个响应式图片的技术思路,大家可以看看:demo

总体来说,响应式网页设计是一种新的网页设计思路,我们满足不同设备下的浏览模式,达到俱佳的体验效果。

下面给大家推荐一个收集响应式网页设计的网站:http://mediaqueri.es/这里推荐了一些比较优秀的响应式设计案例。从中可以给我们很多设计思路!

相关推荐
响应式网页设计的优缺点分析
用户体验之网页板块设计深度解析
超高销售额的成功单页设计三要点分析
网站案例分析之谈首页设计的可用性和PET
网站设计教程:从构建页面到组织架构
QQ空间V6设计分享之设计中的继承与颠覆
B2B行业网站首页设计经验分享
B2B行业网站的页面设计经验分享
网页设计教程:如何打造一个大气的企业网站?
网页设计教程:网页首屏高度定多少合适?
自适应网页设计:不同的设备呈现同样的网页
向用户清晰表达信息是视觉设计的主旨
网页设计中的文字排版、选择等字体设计经验
如何简化网页设计让重点内容更突出?
响应式页面设计的四个要点分享
网站设计技巧:针对不同年龄阶段用户的设计思路
16条PS网页设计经验技巧分享
网页自适应布局设计案例参考
如何在6个月内自学成才成为一个互联网设计师?
网站设计必须避免15个用户体验最差的缺点
用户需求加页面美观:网站首页该放些什么?
电商网站折扣商品价格的显示优化技巧
从电商网站应用设计中学到的九个成功秘诀
9个最新网页设计趋势分享
网页设计新趋势:关于web字体的那些事儿
如何改进网页设计?试试眼球追踪技术吧!
非科班出身的我是如何成为一名设计师的?
对话谷歌交互设计师:Google是怎么做设计的
网站策划:网页设计中7个令人抓狂的错误
经验分享:网页设计的10个常见误解推荐
站长实践:如何设计出符合优化要求的网页
电子商务网站设计分析五:商品列表页设计
经久不衰!网页响应式设计的现状与趋势
电子商务网站设计分析六:商品详情页设计
向Booking学习:设计最具说服力的页面

精彩推荐

热门教程