HTML5与响应式Web设计

在2015年,HTML5与CSS3已经成为了现代化网页的主流,他们似乎在HTML4和CSS2统治了Web很多年之后的某一天突然爆发,然后一直占据着所有Web开发者的视野。HTML5本身就是一个很大很宽泛的词,在严格的意义上,HTML5代表最新版本的HTML语义标准,而完全放开来看,HTML5代表了包括HTML全新的语义,CSS3样式单和JavaScript脚本在内的所有新概念。在开发者当中HTML5常被简称为H5。

但是HTML5在构建一个现代化网页时究竟起了什么作用呢?换言之,在某项开发过程中HTML5能提供一个怎样的解决方案?

这个话题有点大,一篇文章肯定讲不完,那就来说一个现在很实际的一个问题:网页的跨平台兼容性。还在几年前的时候(事实上也挺久之前了),PC屏幕是作为Web内容的唯一载体,很多Web制作者也倾向于使用固定的页面宽度 (fixed width) 来尽可能的保证Web页面在不同分辨率的屏幕浏览器内得到一致的体验,例如,标准的Dreamweaver里的1000×620的空白模版(页面内容宽度为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和移动设备上的争夺也日渐激烈,下图是国内2014年8月的浏览器份额统计。

2014年8月

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

wordwide

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

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

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

成功1成功2

响应式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设计,不得不提两个部分的支持,分别是CSS3和Media Query。我们先从CSS3入手,CSS3是在CSS2.1定义规范核心上的改动,使用CSS3时,要注意IE6,7,8这三个版本会无法支持CSS3的很多新特性,如果你的Web内容就是为了呈现HTML5最新特性所带来的效果的话,大可以不用顾虑兼容性问题。而如今IE的份额已不像几年前那么高,甚至微软都使用Edge来代替IE,这一批老旧浏览器用户已不是多数,所以大多数网站都可以抛弃这部分用户去使用最新特性。当然如果你的目标用户群体对更新自己的设备并不热心的话,你可能需要做一些额外工作。下面这个网页是一个CSS3在其几个新属性上的变化演示:
CSS3
如果你熟悉CSS2.1实现上述效果使用的Slide door设置左右PNG图片填充的手段,就会发现CSS3的革命性:第一,无需在CSS3属性中设置HTTP对图片的请求方式,第二,属性值的灵活调整,可以灵活的应对各种形状的要求,减少工作量;第三,允许追加指定浏览器兼容性,例如对CSS属性值添加-webkit-,-moz-,-chrome-之类的前缀,但是随着W3C对CSS3规范的日益完善,值得高兴的是,前端开发者设定这样的特殊兼容性的工作越来越少。

Media Query是响应式Web设计开发工作中,另外一个要必须掌握的技术,目前Media Query在浏览器上的兼容度要高很多,Firefox,Safari,Chrome,Opera,iOS Safari,IE等主流浏览器都能很好的支持Media Query。CSS3 Media Query模块是目前在特定移动设备上开发Web应用样式所必需的技术,比如如何访问移动设备屏幕可视窗口的宽度 (viewport width) 属性,开发者必须使用CSS3 Media Query。Media Query 从技术成份上分析,其组成是比较简单的,是由一个媒体类型和若幹個检测判断设备媒体功能的表达式所组成,对应不同的设备,通过执行Media Query的判断检测来实现对特定属性的准确访问。我们可以通过下面的截图来简单了解一下Media Query的表达方式。
Query
上图的部份红色下划线标注的部份是CSS3 Media Query表达式,主要通过对屏幕viewport最小分辨率的判断来附加不同的CSS样式单。下面用一个更直观的例子来说明Media Query的作用。
CSSFile
将这个CSS文件link到一个HTML5的页面,用任意一款现代浏览器器打开页面,当我们手动缩放浏览器窗口大小时,会发现随着窗口的缩放,页面的背景颜色起了变化,这就是响应式Web设计里最简单的一个演示,随着浏览器viewport尺寸的改变,media query响应Web页面后呈现了不同的色彩。其实,CSS3 Media Query在HTML5页面中的作用就是与浏览器交互,从浏览器得到对应的True/False结果后,执行特定的CSS3样式加载,例如:

link rel="stylesheet" media="screen and (orientation: landscape) and (min-device-width: 800px), projection" href="landscape-screen.css"

上面这段CSS3的link代码中media属性就是通过Media Query和浏览器做交互的表现形式,通过and来做“与”判断后,加载对应的CSS文件。

毫无疑问,CSS3和Media Query的配合能提供给响应式Web设计良好的支持,满足用户全新环境下为跨屏幕,跨设备的内容浏览需求。

Leave a Reply

Your email address will not be published. Required fields are marked *