名词解释
-
响应式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/
网友评论