响应式网页设计

响应式Web设计

即网页内容会随着访问它的视口及设备的不同而呈现不同的样式。

全球桌面与移动与平板电脑市场份额

(图片来源于statcounter)

• 图片表明使用移动的用户占绝大多数，仍有一定比例的用户使用桌面和平板，响应式Web设计有利于不同用户观看不同屏幕的设备，可以在不同的设备中任意切换，提高不同使用者的便捷性能。

有无采用RWD对比

中山大学无采用RWD.PNG

中山大学南方学院采用RWD.PNG

• 从例子中看出，拥有RWD可以使视口根据不同的设备呈现不同的变化，用户可以便捷的使用该网站，且RWD可以使得该网页的页面简洁清晰，提高网页的可视化。

RWD的三种组成科技

• 弹性网格布局：网站的宽度大小以百分比形式定义，百分比布局使得网页宽度能够随着查看他们的窗口大小变化。
• 弹性图片/媒体：使图片在不同大小的屏幕中放缩自如。
• 媒体查询：媒体查询包含媒体类型和零个或多个检测媒体特性的表达。width、height 和color 都是可用于媒体查询的特性。使用媒体查询，可以不必修改内容本身，而让网页适配不同的设备。

RWD的前端（frontend）和后端（backend）

前端（frontend）：用户接受信息的来源。
后端（backend）：数据的传输和储存。