中英文术语
响应式web设计
网页内容会随着访问它的视口及设备的不同而呈现不同的样式
CSS预处理器
可以组织代码、变量、颜色操作和数字变量
PostCSS
可以完成添加浏览器前缀
视口（viewport）
浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。
标签
按照设备的宽度（device-width）来渲染网页内容。
max-width规则
保证所有图片最大显示为其自身的100%（即最大只可以显示为自身那么大）。如果包含图片的元素（比如包含图片的body或div）比图片固有宽度小，图片会缩放占满最大可用空间。
WWW（World Wide Web）
WWW中文译为万维网，是Internet提供的一种网页浏览服务。
DNS（Domain Name System）
域名解析系统
URL（Uniform Resource Locator）
URL中文译为统一资源定位符，其实就是Web地址（网址）。
HTTP（Hypertext transfer protocol）
HTTP中文译为“超文本传输协议”，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。
Web标准
Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。
结构标准用于对网页元素进行整理和分类，主要包括两个部分：XML和HTML。
表现标准用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为标准是指网页模型的定义及交互的编写，主要包括两个部分：DOM和ECMAScript。
HTML（Hyper Text Markup Language）
HTML中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
CSS
CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
JavaScript
JavaScript是Web页面中的一种脚本语言，通过JavaScript可以将静态页面转变成支持用户交互并响应相应事件的动态页面。在网站建设中，JavaScript用于为页面添加动态效果。
为什么需要响应式web设计
StatCounter2017年6月浏览器调查报告
StatCounter2018年2月Windows 10市场份额
1.开发、维护和运营上，相对多个版本，能节约成本。
2.兼容性优势
移动设备新的尺寸层出不穷，定制的版本通常只适用于某些规格的设备，如果新的设备分辨率变化较大，则往往不能兼容，但是响应式Web设计可以提前预防这个问题。
3.操作灵活
响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。
采用响应式Web设计
腾讯首页http://www.qq.com/
未采用响应式Web设计
Unique IT Offshore | Telemarketing, Call Center Nepal, BPO Nepal, IT Outsourcing, Web Development Nepalhttp://www.uniqueoffshore.com.np/UIT/
RWD的三项组成科技
1、media query（媒体查询）：
① 使用 @media 查询可以针对不同的媒体类型定义不同的样式。
② @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果需要设置设计响应式的页面。
③ 重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
媒介类型：
print：用于打印机和打印预览
screen：用于电脑屏幕，平板电脑，智能手机等
all：用于所有媒体设备类型
媒介特征：
device-height：定义输出设备的屏幕可见高度。
device-width：定义输出设备的屏幕可见宽度。
height：定义输出设备中的页面可见区域高度。
width：定义输出设备中的页面可见区域宽度。
max-device-height：定义输出设备的屏幕可见的最大高度。
max-device-width：定义输出设备的屏幕可见的最大宽度。
max-height：定义输出设备中的页面可见的最大高度。
max-width：定义输出设备中的页面可见的最大宽度。
min-device-height：定义输出设备的屏幕可见的最小高度。
min-device-width：定义输出设备的屏幕可见的最小宽度。
min-height：定义输出设备中的页面可见的最小高度。
min-width：定义输出设备中的页面可见的最小宽度。
2、流动网格布局：
网站的布局必须对显示该网站的设备的尺寸作出反应并适应该尺寸。流体网格布局为创建与显示网站的设备相符的不同布局提供了一种可视化的方式。
3、灵活缩放的图片：
同一个图片需要不同尺寸的缩略图片，一般有两种策略生成缩略图，一种在上传图片时，生成需要的缩略图，另一种是请求指定尺寸的图片时生存缩略图片。
RWD和前后端的关系
需要依赖后端方案的RWD：
网页版、手机版、等等分开服务、设计、产出页面
不需要依赖后端方案的RWD：
网页版、手机版、等等一起服务、设计、产出页面
响应式web设计
“响应式web设计”是Ethan Marcotte在2010年发明的，所谓响应式web设计，就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。最初，响应式设计是从桌面，固定宽度设计开始的，然后到了小屏幕上，内容会重排，或者根据情况隐藏部分内容。随着时间推移，还是采用相反的设计思路更好，即先为小屏幕设计内容、样式，然后再向大屏幕扩展。----摘自《响应式Web设计》
網頁設計─RWD網站設計趨勢http://www.eztrust.com.tw/html/rwd/index.aspx