名词解释

响应式web设计：基于HTML5和css3的RWD响应式web设计，页面内容会随着视口及设备的不同而呈现不同的样式，是利用弹性网格布局，弹性图片、媒体、媒体查询等技术实现的。

Internet网络：通常所说的互联网。

www：万维网，由Internet提供的一种网页浏览器服务。

URL：统一资源定位符，俗称“网址”。

DNS：域名解析系统

HTTP：超文本传输协议，详细规定浏览器和万维网服务器之间互相通信的规则。

web：互联网的使用环境，通常称为网页。

w3c组织：万维网联盟。

JavaScript：将静态页面转化为动态页面，为页面添加动态效果。

引用RWD教科书

响应式web设计是有Ethan Marcotte在2010年提出的，他在A List Part 上发表了一篇文章http://www.alistpart.com/articles/responsive-web-design/，文章综合运用了弹性网格布局，弹性图片/媒体，媒体查询这三种技术。

我认为响应式网页设计是互联网时代的产物，由以下两幅图证明我的观点。

Desktop vs Mobile vs Tablet Market Share China Jan - Dec 2016

根据市场调查机构statcounter 2016年的中国的手机市场与台式电脑市场与平板市场对比，发现在16年三月中旬台式电脑的市场占有率和手机市场占有率有了交叉点，之后手机市场占有率逐渐上升，而台式电脑占有率逐渐下降，说明现在的中国手机使用者远远比台式电脑使用者多。

Desktop vs Mobile vs Tablet Market Share Worldwide Jan-Dec 2016

不仅仅在中国，世界范围内三个市场占有率的比较也在说明手机用户在全球的数量已经在2016年十月中旬就已经超过了电脑用户。

由于手机用户数量的上升，加上智能手机时代的来临，手机已经不仅仅具有打电话发短信这些功能了，能上网进行浏览是现代智能手机的基本功能。为此网页的设计者就不仅仅要考虑网页在电脑上的显示效果了，也要考虑随着互联网时代的到来，许许多多不同产品的屏幕大小，网页美观，网页布局等因素，所以响应式网页设计也应运而生。

响应式网页设计基于HTML5和css3的RWD响应式web设计，页面内容会随着视口及设备的不同而呈现不同的样式，是利用弹性网格布局，弹性图片、媒体、媒体查询等技术实现的。由于响应式网页设计不仅可以满足网站设计者的需求还可以满足不同客户端用户的需求，所以如今很多网站都使用了响应式网页设计，如：

科技媒体TNW是使用了响应式网页设计的 https://thenextweb.com/

TNW网截图

而天猫则没有使用响应式网页设计 https://www.tmall.com/

天猫官网截图

通过以上两组对比，可以很明显的看出使用了RWD技术和不使用的区别，天猫在手机网页浏览时用户需要不停地用手指缩放，十分不方便，而TNW适配不同显示器的大小，图片和文字都能清晰的看见，给了用户很好的感官体验。

之所以可以满足不同显示器的需求，是因为web需要三个标准，分别是结构标准，表现标准，行为标准。结构标准用于对网页元素进行整理和分类，主要包括两个部分：XML和HTML；表现标准用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS；行为标准是指网页模型的定义及交互的编写，主要包括两个部分：DOM和ECMAScript。拥有这三个科技的web，就有了之前网页没有的优点：

1.提高页面浏览速度

2.使网站更易于维护

3.降低网站流量费用

4.更容易被搜寻引擎搜索

5.内容能被更广泛的设备访问

6.让Web的发展前景更广阔

而响应式网页设计的前端和后端借用老师的上课课件图片形象的表明