响应式网页设计

一，专业名词解释

1.响应式网站设计（RWD）

响应式网站设计(简称RWD)是一种新的网站设计模式，以此构建的网站可自动适应不同的访问设备(从桌面电脑、平板电脑到智能手机)，方便用户阅读和导航浏览，减少用户的放大/缩小/滑动操作，从而提供完整而友好的用户体验。基于RWD而设计的网站利用CSS3 media queries规则来自动适应不同访问设备的屏幕尺寸和显示要求。而流动网格采用页面元素大小的相对单位(百分比或EM)，而非传统设计使用的绝对单位(像素或点数)，以确定页面各组成元素的大小。最后，图片大小也是采用相对单位而灵活缩放，不至于在小屏幕的移动设备上超出显示区域。

"响应式web设计"这个名字是Ethan Marcotte在2010年发明的。当时，他在A List Apart 上写了一篇文章（http://alistapart.com/article/responsive-web-design），这篇文章综合运用了三种已有的技术（弹性网格布局，弹性图片/媒体，媒体查询）实现了一个解决方案，就叫做“响应式Web设计。”RWD是前后端的统一，后端来输出不同的内容，前端来按需加载资源。

---

2.超文本标记语言（HTML）

超级文本标记语言是标准通用标记语言超文本标记语言 它通过标记符号来标记要显示的网页中的各个部分。网页本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如，何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

---

3.视口（viewport)

浏览器钟用于呈现网页的区域叫视口，在 Windows的作图函数中，涉及逻辑坐标到设备坐标的转换。这里提到的窗口(window)、视口(viewport)是对应的概念。视口是与设备相关的一个矩形区域，坐标单位是与设备相关的。窗口的坐标是逻辑坐标，与设备无关。窗口坐标的原点与视口坐标的原点始终对应于同一点。对于同一个图形，用窗口坐标系统表达的该区域的长和宽与视口的坐标系统表达的长和宽是不同的。二者就定义了这两个坐标系统的比例关系。程序作图时，使用的坐标总是是窗口坐标。而实际的显示或输出设备却各有自己的坐标。

---

4.层叠样式表(CSS 全称：Cascading Style Sheets)

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或标准通用标记语言的一个子集等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

---

5.网站服务器（Website Server）

网站服务器（Website Server）是指在互联网数据中心中存放网站的服务器。网站服务器主要用于网站的互联网中的发布、应用，是网络应用的基础硬件设施。服务器软件，服务器软件工作在客户端-服务器或浏览器-服务器的方式,有很多形式的服务器,常用的包括:文件服务器(File Server) - 如Novell的NetWare 。数据库服务器(Database Server) - 如Oracle数据库服务器,MySQL,PostgreSQL,Microsoft SQL Server等

---

6.后端（backend）与前端（froutend）

前端是指网页访问者（visitor）所看到的内容和信息，后端是指网页编辑人员(staff)所做的编辑信息。

---

二，为何需要响应式网页设计？

微信图片_20180311160310.png

微信图片_20180311160258.png

（数据来自statcounter）

对比2012年与2018年（最近12个月)世界用户在各个移动终端的使用比例的变化情况，我们不难发现手机用户的比例相比较2012年，2018年得到了巨大的提升，甚至超过了传统使用电脑的用户比例，但传统电脑用户仍有很高比例。平板用户比例也较2012年得到小幅提升。综上，多用户终端使用互联网将是未来的趋势。

响应式网站设计是一种新的网站设计模式.随着视口(viewport)及设备(device)的不同呈现不同的样式(style)利用弹性网格布局(fluid grid)丶弹性图片／媒体(flexible images)丶媒体查询(media queries)等技术实现，以此构建的网站可自动适应不同的访问设备(从桌面电脑、平板电脑到智能手机)，方便用户阅读和导航浏览，减少用户的放大/缩小/滑动操作，从而提供完整而友好的用户体验。

---

三.响应式网页设计实例

1.清华大学官网（电脑显示与手机显示的对比）

image.png

手机版

微信截图_20180311170418.png

电脑版
链接http://www.tsinghua.edu.cn/publish/newthu/index.html
2.中山大学（电脑显示与手机显示相同）

image.png

链接http://www.sysu.edu.cn/2012/cn/index.htm

---