响应式网页设计

《响应式网页设计》第一版曾这么写道：
“从2010年7月到2011年7月，短短12个月，全球手机浏览器的使用量就从2.86%飙升至7.02%。”

相关术语解释

响应式网页设计 Responsive Web design
简称RWD。网页的内容、排版会随着不同的视口与设备的变化而自动改变，让拥有不同设备的用户能更好地体验、浏览网页，不会出现因视口过大导致呈现的效果下降或视口过小导致内容显示不全。

视口 viewport

浏览器中用于呈现网页的区域。
视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。

超文本标记语言5 HTML5
一种标记语言。

HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。

级联样式表 Cascading Style Sheets

简称CSS。

用来进行网页风格设计。不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

JavaScript

一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。

媒体查询

媒体查询可以让我们在某些条件下为网页应用样式。

断点

某个宽度临界点，跨过这个点布局就会发生显著变化。
断点应该由内容和设计本身决定。

前端 front-end

前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现.

后端 backend

后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

为何需要“响应式网页设计”?

如今，移动设备种类越来越多，不同的设备有不同的屏幕分辨率，这就对网页有了新的要求了。
固定宽度的网站总让人们在浏览网页的时候感到不方便，当人们在手机上看为笔记本所设计的网页时，就只能对着屏幕进行放大，滑动，缩小，滑动……久而久之，相信人们也会失去看网页的耐心与兴趣。

全球屏幕分辨率统计

从图表看，全球屏幕分辨率并不一致，所以，是否需要“响应式网页设计”呢？

再从浏览器版本的市场份额看看。

全球浏览器版本市场份额

与响应式网页设计相关的案例

对比
没有采用响应式Web设计

• https://weibo.com/

新浪微博

采用了响应式设计

• https://www.baidu.com/

baidu

• 对比以上两个网页，RWD的效果可以说很明显了。

RWD的三项组成科技

弹性网格布局
基于网格设计，又可以轻松地在不同窗口切换合适的布局，是流体网格，是一种流畅的布局。

让网格在非固定布局中行为。

更多http://alistapart.com/article/fluidgrids

弹性图片、媒体
弹性图片，顾名思义，图片的大小、分辨率并不是固定不变的，而是会根据不同的浏览器窗口大小而灵活地做出变化，给用户更好更舒适的体验。

媒体查询

• 媒体查询由媒体类型和零个或多个表达式组成，用于检查特定媒体功能的条件。可用于媒体查询的媒体功能包括“ width'，' height'和' color'。通过使用媒体查询，演示可以针对特定范围的输出设备进行量身定制，而无需更改内容本身。
• 媒体查询使我们不仅可以定位某些设备类，而且可以实际检查呈现我们工作的设备的物理特征。
• 媒体查询是对我们其他人有条件的评论。

RWD和前后端的关系

简单说，我们能够在网页上看到的东西，就是前端，而我们看不到但却是网页的重大组成部分的，就是后端。前端和后端都相互离不开，需要一起配合。

在RWD中，网页需要灵活地做出改变来迎合不同的屏幕，这就很需要前端的帮忙了。单靠前端是不够的，也需要后端写写代码，帮帮忙。