目的及意义

科技时代已经来临，现在的互联网已经发展到了移动网络5G的时代，我们接触互联网的方式已经开始呈现出多元化方向发展，不断的有各种各样的新型设备(手机/平板电脑/手环)的出现，屏幕大小的展示有很大的不确定因素，平台和浏览器都需要各种网站的网页能够兼容显示。假设现在的个人和企业等方面的网站要求每个显示屏幕都去制作设计一个网站，很明显就会会加大设计和管理网站的成本，同时还会涉及到未来的运营方面的不便和耗费大量的人力财力的成本来支撑其运营。

老式的网站是固定的宽度或者高度，在不同的客户端所展现的页面效果都是一样的。很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone/iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal，会大大增加架构设计的复杂度。于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局。

于是为了解决目前移动设备上浏览网页时产生的可读性不佳、人机交互性较差、加载速度相对慢、页面布局不合理、用户体验较差等问题,人们考虑使用媒体查询技术和流动布局技术的自适应网页设计方法。自适应网站的设计的出现使的设计师在设计一个网站的时候，可以方便快捷的市网页适应不同的终端系统，应用到不同的网络载体上去，它具有非常好的的便捷性，同时也有利于减少企业设计开发网站的成本等。所谓自适应网站设计是指在网页前端展示的内容是活的，即笔记本电脑、台式电脑、移动设备等不同的设备所看到的内容是不一样的，有了这种技术，网页就可以适应任何终端，在任何终端都能展示出最好的效果。对目前的自适应网页设计的发展趋势来讲，无论是放在市场的角度，还是建设网站的角度，自适应网页将会取代传统建设网站的地位。互联网日新月异，随着更多的互联网技术的诞生，会有更强大的技术出现。

1.1国外研究现状

随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？

2010年，Ethan Marcotte提出了“自适应网页设计”(Responsive Web Design)这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。他使用HTML5制作了一个无论是台式机、笔记本、平板还是手机打开都能自动调整排版，智能适配的，从而使浏览效果达到最优的自适应网页。为此世界各浏览器对HTML5的支持度日益增加。

从全球浏览器市场份额来看，对HTML5支持的用户量步步攀升，从全球浏览器市场份额来看，Chrome的用户量步步攀升，再加上对 HTML5 支持度一贯很好的Firefox和Safari浏览器，目前对HTML5支持度较好的浏览器实际占有量达66%。而不支持HTML5的浏览器份额逐步萎缩，IE6至IE8这三个版本的保有量总和已经从2011年1月的46%下降到现在的13%

从国际形式看，通过对比各独立内核浏览器（IE、Firefox、Chrome、Safari、Opera）2011 年最后发布的正式版本和截止到2012年11月30日发布的最新正式版，不难发现各大浏览器对标准的支持都有显著 提高。其中Chrome 23对标准的支持度高达87.2%，位居第一。Safari 6.0的支持度也比Safari 5.1提高了10%，上升至75.6%。同时，我们也看到，IE8版本以下的浏览器对HTML5的支持度低于20%，IE6对HTML5的支持度仅为6.8%。

相对于 PC 平台而言,移动平台一直是开发者更为关心的,因为移动平台浏览器品种较少,版本也普遍集中在最新正式版。同时,由于移动设备的更新换代速度要比 PC 更快,硬件支持和浏览器的状况更好。移动平台上主流的5款浏览器(iOS#8194;Safari#8194;6.0,AAndroid#8194;Browser#8194;4.1,Opera#8194;Mobile#8194;12.1,Chrome#8194;for Android18.0,Firefox#8194;for#8194;Android 15.0),目前对标准的支持度均高于60%,其中表现居首的是Chrome#8194;for#8194;Android，而支持度相对较低的Android系统自带的浏览器Android#8194;Browser对HTML5的支持度也在60%以上。所以HTML5将是未来网站设计的趋势。