响应式网页设计

• 响应式Web设计：网页内容随着访问的不同视口及设备调整呈现

1.基于HTML5和CSS3的RWD（Responsive Web Design）响应式Web设计

2.随着视口(viewport)及设备(device)的不同呈现不同的样式(style)

3.利用弹性网格布局(fluid grid)丶弹性图片／媒体(flexible images)丶媒体查询(media queries)等技术实现*

• 网页就是网站中用于承载信息的页面，主要由文字、图像和超链接等元素构成，除了这些元素，网页中还可以包含音频、视频以及flash等。

• Internet网络 就是通常所说的互联网，是由一些使用公用语言互相通信的计算机连接而成的网络。

• WWW（英文World Wide Web的缩写）中文译为“万维网”是Internet提供的一种网页浏览服务。

• URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符” URL其实就是Web地址，俗称“网址”。

• DNS （英文Domain Name System的缩写）是域名解析系统。

• HTTP (英文Hypertext transfer protocol的缩写) 中文译为“超文本传输协议”，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。

• Web通常指互联网的使用环境。但对于网站制作者来说，它是一系列技术的复合总称，通常称之为网页。

• W3C（英文World Wide Web Consortium的缩写）中文译为“万维网联盟”。万维网联盟是国际最著名的标准化组织。

• Web标准不是某一个标准，而是由WC3和其他标准化组织制定的一系列标准的集合。包含我们所熟悉的HTML、XHTML、CSS、JavaScript等等。

• HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。

• XHTML是更严谨纯净的HTML版本，目的是为了实现HTML向XML的过渡。

• CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

• JavaScript是Web页面中的一种脚本语言，通过JavaScript可以将静态页面转变成支持用户交互并响应相应事件的动态页面。在网站建设中，JavaScript用于为页面添加动态效果。

• px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

• em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

• rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

• 为何需要"响应式网页设计"？

• image.png
  

  上图是近一年来全球桌面与移动与平板电脑市场份额的统计图，明显可看出移动的用户已经占了市场的半壁江山了。随着移动终端的日益丰富和普及，越来越多的人使用移动设备上网。在将来的几年内，移动互联网的数据流量最终会超越桌面端的流量。对于一家企业的网站，如果在移动设备上布局糟糕，就意味着网站访问人数和销售额的损失。而响应式网页可以自动切换分辨率、图片尺寸和相关脚本功能等，实现网页的美观呈现。

• 采用了响应式Web设计的网站:http://www.mountaindew.com/

• image.png
• image.png

• 没有采用响应式Web设计的网站：https://www.tmall.com/

• image.png
  - image.png

• RWD的三项组成科技：弹性网格布局(fluid grid)丶弹性图片／媒体(flexible images)丶媒体查询(media queries)

1、弹性网格布局(fluid grid)：可基于屏幕分辨率扩展或拉伸内容。
2、弹性图片／媒体(flexible images)：在小屏幕上可缩小尺寸，并可扩展大最大尺寸以支持大屏幕。
3、媒体查询(media queries)：媒体查询包含媒体类型和零个或多个检测媒体特性的表达式。width、height和color都是可用于媒体查询的特性。使用媒体查询，可以不必修改内容本身，而让网页适配不同的设备。

• RWD和前後端的关系：

开发一个Web应用的时候我们一般都会简单地分为前端工程师和后端工程师。前端工程师负责浏览器端用户交互界面和逻辑等，后端负责数据的处理和存储等。前后端的关系可以浅显地概括为：后端提供数据，前端负责显示数据。

• Ethan Marcotte曾经在A List Apart发表过一篇文章"Responsive Web Design"，文中援引了响应式建筑设计的概念：现出现了一门新兴的学科——"响应式架构(responsive architecture)"——提出，物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用，建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构；还可以使用运动传感器配合气候控制系统，调整室内的温度及环境光。已经有公司在生产"智能玻璃"：当室内人数达到一定的阈值时，这种玻璃可以自动变为不透明，确保隐私。

• 将这个思路延伸到Web设计的领域，我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案？和响应式建筑相似，Web设计同样应该做到根据不同设备环境自动响应及调整。

• 显然，我们无法也无需使用运动传感器或是机器人技术，响应式Web设计更多需要的是抽象思维。好在，一些相关的概念已经得到了实践，比如液态布局、帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式。(来自百度百科：https://baike.baidu.com/item/%E5%93%8D%E5%BA%94%E5%BC%8F%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1）