响应式网页设计的干货全在这里（关键词）

1. 中英文术语解释

中文	英文
响应式网页设计	responsive web design (rwd)
视口	viewport
超文本标记语言	Hyper Text Markup Language （html）
层叠样式表	Cascading Style Sheets （css）
弹性/流体网格布局	fluid grid
弹性图片／媒体	flexible images
媒体查询	media queries
前端	frontend
后端	backend
全球广域网、万维网、互联网总称	World Wide Web (web)

2. 术语解说

术语	解释
视口	浏览器窗口内的内容，不包括工具栏和标签栏等即网页实际显示区域。
响应式网页设计	不仅仅是根据视口大小改变网页布局，更是针对任意设备对网页内容进行完美布局的一种显示机制。
html	通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。它是web标准的主要结构标准
css	能够对网页中元素位置的排版进行像素级精确控制，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。它是web标准的主要表现标准
弹性/流体网格布局	页面布局结构基于表格，以往的网页布局是以像素（px）为单位，来固定网页各元素的尺寸（导致某些网页需要拖拉滚动才能完整浏览）。在响应式网页设计中，则以百分比为单位，可以让网页根据视口大小在任何媒体查询之间灵活伸缩修正样式（也可以说是使用媒体查询来限制元素变动范围）。以此实现固定尺度转换为相对尺度。
媒体查询	由媒体类型和一个或多个检测媒体特性的条件表达式组成。用于检测例如width、height、color等媒体特性在不同视口的变化。在不改变网页内容前提下，为特定的一些输出设备定制显示效果。
弹性图片	和弹性/流体网格布局一样，实现图片随着流动布局产生相应缩放。通过max-width的属性实现。
前端	直接与用户交互部分，包括对Web页面的结构、Web的外观视觉表现以及Web层面交互设计与实现。不涉及数据逻辑（就好比饭店服务员，只为客户提供服务，不做饭！）
后端	与数据库进行交互以处理相应的业务逻辑。如输入用户名、密码 后登录系统。就要连接数据库来核实。（在后台做菜的厨师）

响应式网页设计的意义何在？

根据statCounter GlobalStats全球数据统计网站（专注于互联网数据统计）统计的中国的屏幕分辨率和设备使用情况为例子

各种设备分辨率使用情况

由图可以看出，不仅设备分辨率种类丰富，更重要的是其它或未知再加上各种小众的分辨率的使用，仍然占有较大的比例。

桌面、手机、平板电脑的使用情况

手机屏幕使用已经比电脑更加普及了。

没有对比就没有伤害

以下是两种不同网页的截图，对比一下响应式与非响应式网页的用户体验

电脑网页截图

手机页面截图

优酷官网做到了在手机屏幕上网页布局适应。字体、图片、图文排版等等也随着屏幕分辨率改变而改变，让受众无需拖拉缩放网页，可以舒适地浏览网页。

---

电脑页面截图

手机网页页面

我们经常使用的教务系统网页就没那么好了，在电脑上浏览还不错，但是在手机上想登陆系统就不得不拖放网页了。（截图被放大了，在手机操作还是需要手动拖放的）这样给受众浏览网页带来一定的不便。

所以为了应对丰富的且不确定的屏幕分辨率，以及日益普及的手机屏幕的使用。要想让你的网页更受欢迎，能够对任意设备进行完美布局的响应式网页设计就显得有必要了，继续采用为pc而设的固定网页布局（固定宽度一般为960px），将逐渐被受众抛弃。

响应式网页设计的实现

响应式网页设计，有伊桑·马科特（Ethan Marcotte）提出。在A List Apart发表了一篇开创性的文章，将三种已有的开发技术（弹性/流体网格布局、媒体查询、弹性图片）整合起来，并命名为响应式网页设计。

HTML5强调简化标签，仅链接那些我们必须的css、javascript和图片文件，也可以在表单提交等基本网页交互场景中对用户做出反馈，一般不需要javascript表单处理流程。所以HTML5允许我们创建更加简洁和快速的代码。

CSS3为响应式设计和更多创新奠定了基础。对于在老版本浏览器中无法解析的属性，不会造成任何问题。这使我们能够为那些先进的浏览器进行渐进增强设计，同时为老版本浏览器提供合理的降级处理。

CSS3还可以灵活、轻量地解决日常的网页设计问题（界面元素创建圆角效果、渐变效果、动画效果）
所以现今的响应式网页设计以流体网格布局、媒体查询、弹性图片三项组成技术和HTML5和CSS3代码工具实现

前端与后端交互

前端与后端

一个web的正常运作，需要前后端数据交互。
访问者根据后台写好的url浏览网页（网页的结构、样式是前端开发工程师做好的），以GET和POST的两种方式从前端发送请求参数给后端，后端根据查询条件和前端的请求参数从数据库里去查询相应的数据表以获得相应的内容或者图片地址信息 ，再发回到前端。（我们所说的网页设计与制作就是前端开发的范畴）