HTML5、CSS3与响应式Web设计入门(1)

HTML5、CSS3与响应式Web设计入门(1)

51CTO专稿】HTML5与CSS3已经当仁不让的成为了这两年Web界最火爆的词，他们似乎在HTML4和CSS2统治了Web很多年之后的某一天突然爆发，然后一直占据着所有Web开发者的视野。HTML5本身就是一个很大很宽泛的词，在严格的意义上，HTML5代表最新版本的HTML语义标准，而完全放开来看，HTML5代表了Open Web所包含的所有技术，HTML全新的语义，CSS3样式单和JavaScript脚本所组合而成的开放的Web世界。

任何事情都有两面性，HTML5的宽泛含义开拓了Web开发的视野，增加了开发方案的多样性，同时也带给很多Web开发者不小的困惑，就是HTML5在涉及到Web某个应用领域的开发时，到底代表了什么？本篇文章的目的就在于跟大伙分享HTML5,CSS3在移动Web应用开发上的概念和特点，这个概念就是“Responsive Web Design - 响应式Web设计"。Web设计师还在几年前的时候,PC屏幕是作为Web内容的唯一载体，很多Web制作者也倾向于使用固定的页面宽度(fixed width)来尽可能的保证Web页面在不同分辨率的屏幕浏览器内得到一致的体验，例如，标准的Dreamweaver里的1000x620的空白模版页面内容宽度为960的fixed类型）,这样，不论用户用1024,1280还是1600分辨率的显示器浏览页面时，都会看到一个相对一样的页面外观。但是时至今日，随着智能手机和智能平板设备的迅速流行，随着移动互联网数据流量大幅增长，Web页面制作者们发现原有的Web设计布局方式越来越不合时宜。在移动设备相对较小的屏幕上浏览Web内容和在PC显示器上的浏览体验已经完完全全地不同了。这时候，HTML5和CSS3为所有Web开发者带来了一种全新的Web内容的设计开发方案，那就是今天本文的中心：“Responsive Web Design - 响应式Web设计”。顾名思义，通过使用HTML5和CSS3的合理搭配，使得Web内容可以在很多种不同的设备屏幕上以自动适配的方式出现在浏览器内，从而给用户带来更好的体验。

本篇文章将从以下几个方面来围绕讨论响应式Web设计：

• 定义移动设备的Web设计，接着定义何为响应式Web设计，同时分享几个成功案例。
• 了解设备屏幕视图和分辨率的差异性
• HTML5和CSS3所能解决的基础性问题

---

最近3年，除了移动互联网的日渐强大，另一个伴随而生的问题就是浏览器在PC和移动设备上的争夺也日渐激烈，下图是国内2012年12月的浏览器份额统计。

上图摆在Web开发者面前的一个最大的问题就是，如何才能保证Web制作的内容，尽可能的满足这么多浏览器的兼容性问题。接下来的图表数据来自gs.statcounter.com，是过去一年来全球来自移动设备和桌面浏览器的数据对比。

这张图里的数据不难看出，桌面浏览器的份额每个月都在走低，而移动设备浏览器所带来的增长则是显而易见的，每个Web开发者都不能忽视那将近15%的用户群体。所以，响应式设计这个概念的提出，对每个旨在移动设备和桌面上交付完美的Web内容体验的前端开发者都非常重要，它不仅解决的是浏览器兼容性的问题，更着重于解决不同设备上的内容浏览体验的问题。

没有经过响应式设计考量的网站，在移动设备的浏览器上虽然可以缩小整个网站的版面，维持原有PC屏幕适配的排版布局，但是这样的网页内容最大的一个问题是，通过手机或pad浏览器浏览网站的内容，会不间歇的使用Zoom in和Zoom out操作来缩放内容或不断的上下左右调整视图(viewport)区域内的内容以可供浏览。而这样的频繁操作所造成的负面影响是巨大的，那就是用户会变的抓狂，且不会长时间的浏览这样的Web站点，造成网站用户流失率不断加大。下面是我本人在iPhone4S上通过safari浏览器打开的2个站点的截图，在iPhone屏幕上看到的是和PC上一模一样的首页布局，站点还未进行过针对用户设备而自动适配内容的优化，很显然，没有响应式设计的考量会“劝退”很多网站的浏览者。

而经过响应式设计考量的Web站点则提供给用户更好的体验，无论用户是通过PC终端还是移动设备打开的站点。下面两图分别是作者通过iPhone4S的Safari浏览器直接输入域名后出现的站点，网站很显然检测到了用户来自手机浏览器，进而自动切换至合适的页面布局来满足用户的浏览要求。这无疑是响应式Web设计最大的优点之一。

响应式Web设计(responsive web design)的术语最早由Ethan Marcotte在2010年的一篇文章中提出，该文章的网页地址是：http://www.alistapart.com/articles/responsive-web-design/。因此狭义的responsive web design在上面Ethan的文章中被定义由三个部份组成，灵活的单元格布局(flexible grid layout)，灵活的图像(flexible images)，媒体及对应的媒体查询(media and media queries）。而随着HTML5和CSS3的出现，响应式web设计在更多前端开发者的认知中被广义的认定为流畅的设计，弹性的布局设计，易于改变的布局设计，可自动适配的布局设计，跨设备跨平台的web设计等等。

文章接下来的部份就谈谈在开始响应式Web设计前，一个前端交互设计师应该使用何种工具，我这里简单的罗列一下。