响应式网页设计

名词解释

• 响应式Web设计（RWD）

响应式Web设计，即Responsive Web Design，就是网页内容会随着访问它的视口（viewport）及设备（device）的不同而呈现不同样式（style）。可以让Web作品适配手机、平板和桌面电脑。响应式的网站可以适应用户的屏幕大小，为今天和明天的设备都提供最佳的用户体验。

• 弹性网格布局

在我们的Web内容中被分为很多个内容区块，这些区块都有自己占据的区域，可以将这个区域想象成是虚拟的网格。

• DIV

称为区隔标记，作用于图、表和画等的摆放位置。

---

Data Example

1.从全球数据关于“Desktop vs Mobile vs Tablet 市场占据份额 2009-2018”的图表来看：Desktop近年来在市场的使用份额有所下降，但是就整体的格局来看，Deaktop依旧占据很大的市场份额；Mobile在最近几年占据市场很大的份额。
由于手机的普及率大大提高，可是电脑的使用率依旧占据50%以上，所以需要共同适应于手机和电脑的上网体验至关重要。这就是为何我们需要“响应式Web设计”的理由之一。

StatCounter-comparison-ww-yearly-2009-2018

2.根据“Screen Resolution Stats Worldwide 2009-2018”的数据来看
从2009年至2018年增长最多的屏幕分辨率来看是360x640，这个是适应于手机的屏幕分辨率，可以看出大桌面的屏幕分辨率也占据市场的一部分份额，因此，适应大桌面的和手机小桌面的屏幕分辨率的网页设计结构十分重要。这是“响应式Web设计”出现的另外一个原因。

StatCounter-resolution-ww-yearly-2009-2018 (1).png

---

响应式Web设计 例子

• 使用Web响应式设计

eg:IBM官网: https://www.ibm.com

IBM

• 未使用Web响应式设计：

eg:电子科技大学中山学院：http://www.zsc.edu.cn

电子科技大学中山学院

---

RWD的三项组成科技：

• Fluid Grid （流式格网）

不使用固定的px来确定页面像素的宽度，使用%来确定。

• Flexible Images（弹性图片）

指的是在现代浏览器中，图片可以根据页面的大小进行调整，即图片的自适应处理，根据容器的大小调整到适合的比例。

• Media Queries（媒体查询）

可以让我们在某些条件下（如在知道宽度和高度多少的情况下）为网页应用样式。

---

RWD与前端的关系：

前端是Web的网页设计、网页结构、外观等等我们可以直接看到的东西，RWD在其中起到的作用有：可以让用户根据不同的页面大小更换网页的格局，从而达到良好的阅读体验。

RWD与后端的关系

后端是数据库、云端数据之间的交互，更注重于网页的性能等。

---

Marcotte的个人网页：https://ethanmarcotte.com/