名词解释

1. 响应式WEB设计

• 英语：Responsive web design，通常缩写为RWD。
• 是一种网页设计的技术做法，该设计可使网站在不同的装置（从桌面电脑显示器到移动电话或其他行动产品装置）上浏览时对应不同分辨率皆有适合的呈现，减少使用者进行缩放、平移和卷动等操作行为。
• 参考资料：wiki-回應式網頁設計

2. CSS3

• 层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表、级联样式表、串接样式表、层叠样式表、階層式樣式表，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。CSS3正是CSS技术的升级版本，现在已被大部分现代浏览器支持。
• 参考资料：wiki-层叠样式表

3. HTML5

• 超文本标记语言（英语：Hyper Text Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。HTML5是HTML最新的修订版本，进行了一定的删改和追加。
• 参考资料：wiki-HTML5

响应式WEB设计的必要性

• 来自statcounter的数据表明，现今使用不同分辨率屏幕的人群正在不断增加。下图为statcounter2017年2月至2018年2月的全球屏幕分辨率统计图表。

  
  可以看出，使用小屏幕的人比重更大
• 小屏幕使用数量遥遥领先，而且不断增加

• 作为一种能够自动适应不同屏幕尺寸的网页设计技术，RWD能够为移动设备提供更好的体验，并且整合从桌面到手机的各种屏幕尺寸和分辨率，用技术来使网页适应从小到大（现在到超大）的不同分辨率的屏幕。

实例

• 未采用RWD的网站：深大附中
• 采用RWD的网站：newloong

RWD的组成

1. media query（媒介查询）;
2. 流动网格；
3. 灵活缩放的图片

• 基于RWD而设计的网站利用CSS3 media queries规则来自动适应不同访问设备的屏幕尺寸和显示要求。而流动网格采用页面元素大小的相对单位(百分比或EM)，而非传统设计使用的绝对单位(像素或点数)，以确定页面各组成元素的大小。最后，图片大小也是采用相对单位而灵活缩放，不至于在小屏幕的移动设备上超出显示区域。
• 参考资料：On being “responsive.” — Ethan Marcotte

RWD与前后端

• 前端：前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。
• 后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。
• 响应式设计是从“桌面”、固定宽度设计开始的。

相关资料

• 响应式设计个人的一些总结 - 前后端知识分享 - SegmentFault 思否
• RWDに効くCSSテクニック